diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2026-01-04 21:36:47 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2026-01-04 21:36:47 -0800 |
| commit | b449f76bc3f36525f37634a5d93f405b155f86d8 (patch) | |
| tree | e19384660b513165efe57f38d31fe5b586b1e9f3 /.demo/example-editor.html | |
| parent | 681a8af8b192387ada5045ad0d7db53b1ec131b6 (diff) | |
| download | adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.tar.gz adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.zip | |
Package editor into its own script
Diffstat (limited to '.demo/example-editor.html')
| -rw-r--r-- | .demo/example-editor.html | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/.demo/example-editor.html b/.demo/example-editor.html new file mode 100644 index 0000000..f6505bc --- /dev/null +++ b/.demo/example-editor.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Adelie Editor - Standalone Example</title> + <link rel="stylesheet" href="dist/bundle.css" /> +</head> +<body> + <header> + <h1>Adelie Editor Standalone Example</h1> + <input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" /> + </header> + + <main style="max-width: 1000px; margin: 0 auto; padding: 2rem;"> + <article> + <h2>Simple Usage</h2> + <div id="my-editor"></div> + </article> + + <article style="margin-top: 3rem;"> + <h2>With Options</h2> + <div id="css-editor"></div> + </article> + </main> + + <!-- Load the standalone editor bundle --> + <script src="dist/adelie-editor.js"></script> + + <script> + // Simple initialization + const editor1 = adelieEditor.init('#my-editor', { + language: 'javascript', + initialCode: `// Type your code here +function hello() { + console.log("Hello from Adelie Editor!"); +}` + }); + + // With custom options + const editor2 = adelieEditor.init('#css-editor', { + language: 'css', + initialCode: `/* Adelie Editor with CSS */ +.my-class { + color: var(--primary); + background: var(--surface); +}` + }); + + // Theme toggle + const toggle = document.getElementById('theme-toggle'); + toggle.addEventListener('change', () => { + const theme = toggle.checked ? 'dark' : 'light'; + document.documentElement.setAttribute('data-theme', theme); + }); + </script> +</body> +</html> |