Socket
Socket
Sign inDemoInstall

codeflask

Package Overview
Dependencies
2
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

codeflask

A micro code-editor for awesome web pages


Version published
Maintainers
1
Weekly downloads
9,884
increased by3.94%

Weekly downloads

Readme

Source

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.

Keywords

FAQs

Last updated on 13 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc