diff --git a/README.md b/README.md index 671c960..347e95b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@
codecup: A micro code-editor for awesome web pages.
- A Fork of CodeFlask
+ (Originally A Fork of CodeFlask)
@@ -19,10 +19,13 @@ CodeFlask was a brilliant project, but seems to be unmaintained, and it required * Switched from rollup to webpack * Added example folder * disabled e2e tests - * Required (Legacy deps - might rebuild) * Small theme tweaks (Border, rounded corners.) * updateded all codeflask references to codecup - 13/11/2023 +* Languages are now loaded async (via prismjs), so you can load any language you want, without having to bundle them all. - Jan 2024 + +> [!NOTE] +> Languages supported are : [https://prismjs.com/#supported-languages](https://prismjs.com/#supported-languages) ### Core Changes > (Submitted as [PR](https://github.com/kazzkiq/CodeFlask/pull/134) to CodeFlask, incase it gets picked up again) @@ -102,15 +105,11 @@ const cup = new codecup('#my-selector', { }); ``` -### Enabling rtl (right to left writing) +You can also toggle line numbers after the editor is created: ```js -import codecup from 'codecup'; +cup.toggleLineNumbers(); -const cup = new codecup('#my-selector', { - language: 'js', - rtl: true -}); ``` ### Enabling read only mode @@ -119,18 +118,21 @@ const cup = new codecup('#my-selector', { import codecup from 'codecup'; const cup = new codecup('#my-selector', { - language: 'js', + language: 'javascript', readonly: true }); ``` -### Adding other languages support: +### changing other languages support: ```js -cup.addLanguage('ruby', options) +cup.updateLanguage('ruby') +// +cup.updateLanguage('javascript') +// ``` -#### For Example to add 'Ruby' +#### For Example to add change dynamically from 'Ruby' to 'javascript' ```js import Prism from 'prismjs'; @@ -141,33 +143,5 @@ const cup = new codecup('#my-selector', { readonly: true }); -cup.addLanguage('ruby', Prism.languages['ruby']); -``` - -This API is simply a proxy to add a new language to [Prism](http://prismjs.com/) itself (the code highlighter). The `options` parameter must be the same accepted in Prism. You can read more about it [here](http://prismjs.com/extending.html#language-definitions). - -By default, codecup supports the following languages (which are also the default supported in Prism): - -- Markup (HTML/XML); -- CSS; -- C-like; -- JavaScript; - -### Adding your own theme to codecup - -By default, codecup comes with a simple theme made from scratch called **[CodeNoon](https://github.com/kazzkiq/codecup.js/blob/master/src/styles/theme-default.js)**. - -You can easily override this theme with your own by writting your own CSS and adding it to your project. If that's the case, you should also disable **CodeNoon** with the `defaultTheme` option: - -```js -import codecup from 'codecup'; - -const cup = new codecup('#my-selector', { - language: 'js', - defaultTheme: false -}); +cup.updateLanguage('javascript'); ``` - -# Credits & Thanks - -codecup.js was made possible by awesome open-source projects such as [Prism.js](https://github.com/PrismJS/prism) and [Webpack](https://github.com/webpack). diff --git a/example/index.html b/example/index.html index 384892e..01a78e2 100644 --- a/example/index.html +++ b/example/index.html @@ -48,7 +48,7 @@ let demo_init = () => { cup.enableLineNumbers() cup.disableReadonlyMode() - cup.updateCode('// Hello World \nlet num_a = 45; \nlet num_b = 33; \n\nlet adder = (_num_a,_num_b) => {\n\treturn _num_a + _num_b; \n}\n\nlet ans = adder(num_a,num_b)'); + cup.updateCode("Hello") } let demo_create = () => { diff --git a/src/codecup.js b/src/codecup.js index 5cf8d81..cec5a7e 100644 --- a/src/codecup.js +++ b/src/codecup.js @@ -392,7 +392,7 @@ export default class codecup { updateCode (newCode) { this.code = newCode - this.elTextarea.value = newCode + this.elTextarea.value = escapeHtml(newCode) this.elCode.innerHTML = escapeHtml(newCode) this.highlight() this.setLineNumber() @@ -407,9 +407,9 @@ export default class codecup { this.highlight() } - addLanguage (name, options) { - Prism.languages[name] = options - } + // addLanguage (name, options) { + // Prism.languages[name] = options + // } populateDefault () { this.updateCode(this.code)