# code-pretty Custom Element Links: [Home](../index.md) A custom HTML element `` that renders syntax-highlighted, editable code blocks using the [Code Editor](../gadgets/code-editor.md) module. ## Loading the Module ```js Application.require("custom-elements/code-pretty").then(function () { // element is now registered and ready to use in HTML }); ``` **Dependencies:** `gadgets/code-editor`, `custom-elements`, `extensions/prototype`, `uri-load` ## HTML Attributes | Attribute | Type | Default | Description | |---|---|---|---| | `language` | `string` | `"text"` | Syntax highlighting language | | `theme` | `string` | `"monokai"` | CodeMirror theme name | | `code-line-numbers` | `boolean` | `true` | Show line numbers | | `code-line-wrapping` | `boolean` | `true` | Enable line wrapping | | `code-match-brackets` | `boolean` | `true` | Highlight matching brackets | | `code-tab-size` | `number` | `4` | Tab indentation size | | `readonly` | `boolean` | `false` | Make the editor read-only | | `code-indent-with-tabs` | `boolean` | `true` | Use tabs for indentation | | `code-match-tags` | `boolean` | `true` | Highlight matching HTML tags | | `code-font-size` | `string` | `"12px"` | Font size | | `code-font-family` | `string` | -- | Font family | | `code-show-training-spaces` | `boolean` | `true` | Highlight trailing whitespace | | `code-fold-gutter` | `boolean` | `true` | Show code folding gutter | | `height` | `string` | `"auto"` | Editor height | ## Element Methods | Method | Description | |---|---| | `theme(name, callback)` | Change the editor theme | | `syntax(mode, callback)` | Change the syntax highlighting language | ## Use Cases ### Display read-only JavaScript code ```html function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } ``` ### Editable HTML snippet with custom theme ```html Demo

Hello World

``` ### Dynamically create a code-pretty element ```js Application.require("custom-elements/code-pretty").then(function () { var el = document.createElement('code-pretty'); el.setAttribute('language', 'python'); el.setAttribute('theme', 'monokai'); el.setAttribute('readonly', ''); el.textContent = 'print("Hello from Python")'; document.getElementById('container').appendChild(el); }); ``` ### Change language at runtime ```js var codePretty = document.querySelector('code-pretty'); codePretty.syntax('css', function () { console.log('Language changed to CSS'); }); ``` ## Notes - The element must be registered before use. Ensure `Application.require("custom-elements/code-pretty")` resolves before using `` in your HTML. - Content placed between the opening and closing tags becomes the initial code. - Attribute changes are observed and applied dynamically.