Code Engine dm_code_engine ## Overview A lightweight code editor using the `<el-dm-code-engine>` custom element, backed by CodeMirror 6. Supports syntax highlighting for 25+ languages. Requires `@duskmoon-dev/el-code-engine` registered in your app: ```js import "@duskmoon-dev/el-code-engine/register"; ``` ## Usage ```elixir # Standalone <.dm_code_engine language="elixir" value={@code} /> # With Phoenix form field <.dm_code_engine field={@form[:source]} language="javascript" /> # With topbar and theme <.dm_code_engine field={@form[:source]} language="typescript" theme="one-dark" show_topbar title="index.ts" /> ``` ## Attributes | Attribute | Type | Default | Description | |-----------|------|---------|-------------| | `field` | `FormField` | — | Phoenix form field (sets id/name/value automatically) | | `name` | `string` | `nil` | HTML name for form submission | | `value` | `any` | `nil` | Initial editor content | | `id` | `any` | `nil` | HTML id | | `language` | `string` | `nil` | Syntax highlighting language | | `theme` | `string` | `nil` | Theme: `duskmoon`, `sunshine`, `moonlight`, `one-dark` | | `readonly` | `boolean` | `false` | Make the editor read-only | | `wrap` | `boolean` | `false` | Enable line wrapping | | `show_topbar` | `boolean` | `false` | Show topbar with copy button and title | | `show_bottombar` | `boolean` | `false` | Show bottombar | | `title` | `string` | `nil` | Title shown in topbar (e.g. filename) | | `class` | `any` | `nil` | Additional CSS classes | ## Slots | Slot | Description | |------|-------------| | `:topbar` | Custom topbar content (replaces default) | | `:bottombar` | Custom bottombar content (replaces default) | ## Supported Languages javascript, typescript, css, html, json, python, markdown, xml, sql, rust, go, java, cpp, php, yaml, sass, less, elixir, erlang, heex, dart, zig, vue, angular, liquid, jinja, wast, lezer, caddyfile Rust Elixir With Topbar One Dark Theme Read-only Line Wrapping With Custom Bottombar SQL | UTF-8