Wondering what’s next for npm?Check out our public roadmap! »

    codeflask
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/codeflask package

    1.4.1 • Public • Published

    npm version Build Status


    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

    import CodeFlask from 'codeflask';
     
    const flask = new CodeFlask('#my-selector', { language: 'js' });

    Listening for changes in editor

    flask.onUpdate((code) => {
      // do something with code here.
      // this will trigger whenever the code
      // in the editor changes.
    });

    Updating the editor programatically

    // This will also trigger .onUpdate()
    flask.updateCode('const my_new_code_here = "Blabla"');

    Getting the current code from editor

    const code = flask.getCode();

    Enabling line numbers

    import CodeFlask from 'codeflask';
     
    const flask = new CodeFlask('#my-selector', {
      language: 'js',
      lineNumbers: true
    });

    Enabling rtl (right to left writing)

    import CodeFlask from 'codeflask';
     
    const flask = new CodeFlask('#my-selector', {
      language: 'js',
      rtl: true
    });

    Enabling read only mode

    import CodeFlask from 'codeflask';
     
    const flask = new CodeFlask('#my-selector', {
      language: 'js',
      readonly: true
    });

    Adding other languages support:

    flask.addLanguage('ruby', options)

    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:

    import CodeFlask from 'codeflask';
     
    const flask = new CodeFlask('#my-selector', {
      language: 'js',
      defaultTheme: false
    });

    Credits & Thanks

    CodeFlask.js was made possible by awesome open-source projects such as Prism.js and Rollup.

    Install

    npm i codeflask

    DownloadsWeekly Downloads

    3,150

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    55.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar