CodeFlask: A micro code-editor for awesome web pages.
Installation
You can install CodeFlask via npm:
npm install codeflask
Or use it directly in browser via cdn service:
https://unpkg.com/codeflask/build/codeflask.min.js
Usage
; const flask = '#my-selector' language: 'js' ;
Listening for changes in editor
flask;
Updating the editor programatically
// This will also trigger .onUpdate()flask;
Getting the current code from editor
const code = flask;
Enabling line numbers
; const flask = '#my-selector' language: 'js' lineNumbers: true;
Enabling rtl (right to left writing)
; const flask = '#my-selector' language: 'js' rtl: true;
Enabling read only mode
; const flask = '#my-selector' language: 'js' readonly: true;
Adding other languages support:
flask
This API is simply a proxy to add a new language to Prism itself (the code highlighter). The options
parameter must be the same accepted in Prism. You can read more about it here.
By default, CodeFlask supports the following languages (which are also the default supported in Prism):
- Markup (HTML/XML);
- CSS;
- C-like;
- JavaScript;
Adding your own theme to CodeFlask
By default, CodeFlask comes with a simple theme made from scratch called CodeNoon.
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:
; const flask = '#my-selector' language: 'js' defaultTheme: false;
Credits & Thanks
CodeFlask.js was made possible by awesome open-source projects such as Prism.js and Rollup.