Last active
January 27, 2021 17:36
-
-
Save mattduffield/2d92b9a716610764fe4d4a9210b5c388 to your computer and use it in GitHub Desktop.
Aurelia - CodeJar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Dumber Gist</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> | |
| <base href="/"> | |
| </head> | |
| <!-- | |
| Dumber Gist uses dumber bundler, the default bundle file | |
| is /dist/entry-bundle.js. | |
| The starting module is pointed to "main" (data-main attribute on script) | |
| which is your src/main.js. | |
| --> | |
| <body> | |
| <my-app></my-app> | |
| <script src="/dist/entry-bundle.js" data-main="main"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "dependencies": { | |
| "aurelia": "dev", | |
| "codejar": "^3.2.3", | |
| "highlight.js": "^10.2.1" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <use-shadow-dom></use-shadow-dom> | |
| <div class="editor ${language}" contenteditable="true" spellcheck="false"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {inject, bindable, BindingMode, shadowCSS, PLATFORM} from 'aurelia'; | |
| import editorCss from './editor.css'; | |
| import {CodeJar} from 'codejar'; | |
| import hljs from 'highlight.js/lib/core'; | |
| import html from 'highlight.js/lib/languages/xml'; | |
| import javascript from 'highlight.js/lib/languages/javascript'; | |
| import json from 'highlight.js/lib/languages/json'; | |
| import markdown from 'highlight.js/lib/languages/markdown'; | |
| import agateCss from 'highlight.js/styles/agate.css'; | |
| import draculaCss from 'highlight.js/styles/dracula.css'; | |
| import atomOneDarkCss from 'highlight.js/styles/atom-one-dark.css'; | |
| import tomorrowNightBrightCss from 'highlight.js/styles/tomorrow-night-bright.css'; | |
| const cssStyleSheet = new CSSStyleSheet(); | |
| cssStyleSheet.replace(agateCss); | |
| const styles = { | |
| agate: agateCss, | |
| dracula: draculaCss, | |
| atomOneDark: atomOneDarkCss, | |
| tomorrowNightBight: tomorrowNightBrightCss | |
| }; | |
| hljs.registerLanguage('javascript', javascript); | |
| hljs.registerLanguage('json', json); | |
| hljs.registerLanguage('html', html); | |
| hljs.registerLanguage('markdown', markdown); | |
| @inject(Element) | |
| export class CodeEditor { | |
| static get dependencies() { return [shadowCSS(editorCss, cssStyleSheet)]; } | |
| @bindable theme = 'agate'; | |
| @bindable content = ''; | |
| @bindable language = 'language-md'; | |
| codejar; | |
| constructor(element) { | |
| this._element = element; | |
| } | |
| get element() { | |
| if (this._element.shadowRoot) { | |
| return this._element.shadowRoot; | |
| } else { | |
| return this._element; | |
| } | |
| } | |
| async attached() { | |
| if (this.theme) { | |
| cssStyleSheet.replace(styles[this.theme]); | |
| } | |
| const editor = this.element.querySelector(".editor"); | |
| const options = {tab: ' '.repeat(2)} | |
| const highlight = (editor) => { | |
| editor.textContent = editor.textContent | |
| hljs.highlightBlock(editor) | |
| } | |
| this.codejar = new CodeJar(editor, highlight, options); | |
| this.codejar.onUpdate(code => { | |
| console.log(code); | |
| }); | |
| if (this.content) { | |
| this.codejar.updateCode(this.content); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .editor { | |
| border-radius: 6px; | |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); | |
| font-family: 'Source Code Pro', monospace; | |
| font-size: 14px; | |
| font-weight: 400; | |
| height: 340px; | |
| letter-spacing: normal; | |
| line-height: 20px; | |
| padding: 10px; | |
| resize: none !important; | |
| tab-size: 2; | |
| } | |
| .editor.hljs { | |
| padding: 10px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Aurelia from 'aurelia'; | |
| import { MyApp } from './my-app'; | |
| Aurelia.app(MyApp).start(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <import from="./code-editor"></import> | |
| <h1>${message}</h1> | |
| <code-editor language="language-html" | |
| content.bind="content" | |
| theme="atomOneDark"></code-editor> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class MyApp { | |
| message = 'Hello Aurelia 2!'; | |
| content = ` | |
| <div class="chart-container" style="position: relative; height: 90vh;"> | |
| <canvas id="myChart"></canvas> | |
| </div> | |
| `; | |
| language = 'language-html'; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment