codecup: A micro code-editor for awesome web pages.
(Originally A Fork of CodeFlask)
CodeFlask was a brilliant project, but seems to be unmaintained, and it required some significant updates to work with a new project I am working on.
cup = new codecup('#cf_holder', { language: "javascript", lineNumbers: true , copyButton: true, maxLines : 15, minLines : 5 });
- Added max line number option
- Switched from rollup to webpack
- Added example folder
- disabled e2e tests
- Small theme tweaks (Border, rounded corners.)
- updateded all codeflask references to codecup - 13/11/2023
Important
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
(Submitted as PR to CodeFlask, incase it gets picked up again)
- Added support to destroy
- Added Linenumber add / remove
- Added Linenumber toggle
- Added Readonly toggle
You can install codecup via npm:
npm i @calumk/codecup
Or use it directly in browser via cdn service:
https://cdn.jsdelivr.net/npm/@calumk/codecup
import codecup from '@calumk/codecup'; const cup = new codecup('#my-selector', { language: 'js' });
You can also pass a DOM element instead of a selector:
import codecup from 'codecup'; const editorElem = document.getElementById('editor'); const cup = new codecup(editorElem, { language: 'js' });
Usage with Shadow DOM:
import codecup from 'codecup'; ... const shadowElem = this.shadowRoot.querySelector('#editor'); const cup = new codecup(shadowElem, { language: 'js', styleParent: this.shadowRoot });
cup.onUpdate((code) => { // do something with code here. // this will trigger whenever the code // in the editor changes. });
// This will also trigger .onUpdate() cup.updateCode('const my_new_code_here = "Blabla"');
const code = cup.getCode();
The copy button is now enabled by default, and will copy the code to the clipboard when clicked.
it can be disabled by passing copyButton: false in the options.
const cup = new codecup('#my-selector', { language: 'javascript', copyButton: false });
import codecup from 'codecup'; const cup = new codecup('#my-selector', { language: 'js', lineNumbers: true });
You can also toggle line numbers after the editor is created:
cup.toggleLineNumbers();
Important
As of 1.90, You can also set the max line number, (Default is 100), And the min line number, (Default is 1)
Note
If you want it to be a fixed number of lines, set both to the same number.
import codecup from 'codecup'; const cup = new codecup('#my-selector', { language: 'js', lineNumbers: true, maxLines: 10, minLines: 10 });
import codecup from 'codecup'; const cup = new codecup('#my-selector', { language: 'javascript', readonly: true });
cup.updateLanguage('ruby') // cup.updateLanguage('javascript') //
import Prism from 'prismjs'; import codecup from 'codecup'; const cup = new codecup('#my-selector', { language: 'ruby', readonly: true }); cup.updateLanguage('javascript');