Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kazzkiq/codeflask
A micro code-editor for awesome web pages.
https://github.com/kazzkiq/codeflask
code-editor css highlight html javascript
Last synced: 29 days ago
JSON representation
A micro code-editor for awesome web pages.
- Host: GitHub
- URL: https://github.com/kazzkiq/codeflask
- Owner: kazzkiq
- License: mit
- Created: 2015-08-15T19:58:05.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-09-17T11:30:27.000Z (about 1 year ago)
- Last Synced: 2024-10-15T06:03:40.947Z (29 days ago)
- Topics: code-editor, css, highlight, html, javascript
- Language: JavaScript
- Homepage: https://kazzkiq.github.io/CodeFlask/
- Size: 6.36 MB
- Stars: 1,070
- Watchers: 23
- Forks: 121
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/codeflask)
[](https://travis-ci.org/kazzkiq/CodeFlask)
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
```js
import CodeFlask from 'codeflask';
const flask = new CodeFlask('#my-selector', { language: 'js' });
```
You can also pass a DOM element instead of a selector:
```js
import CodeFlask from 'codeflask';
const editorElem = document.getElementById('editor');
const flask = new CodeFlask(editorElem, { language: 'js' });
```
Usage with Shadow DOM:
```js
import CodeFlask from 'codeflask';
...
const shadowElem = this.shadowRoot.querySelector('#editor');
const flask = new CodeFlask(shadowElem, { language: 'js', styleParent: this.shadowRoot });
```
### Listening for changes in editor
```js
flask.onUpdate((code) => {
// do something with code here.
// this will trigger whenever the code
// in the editor changes.
});
```
### Updating the editor programatically
```js
// This will also trigger .onUpdate()
flask.updateCode('const my_new_code_here = "Blabla"');
```
### Getting the current code from editor
```js
const code = flask.getCode();
```
### Enabling line numbers
```js
import CodeFlask from 'codeflask';
const flask = new CodeFlask('#my-selector', {
language: 'js',
lineNumbers: true
});
```
### Enabling rtl (right to left writing)
```js
import CodeFlask from 'codeflask';
const flask = new CodeFlask('#my-selector', {
language: 'js',
rtl: true
});
```
### Enabling read only mode
```js
import CodeFlask from 'codeflask';
const flask = new CodeFlask('#my-selector', {
language: 'js',
readonly: true
});
```
### Adding other languages support:
```js
flask.addLanguage('ruby', options)
```
#### For Example to add 'Ruby'
```js
import Prism from 'prismjs';
import CodeFlask from 'codeflask';
const flask = new CodeFlask('#my-selector', {
language: 'ruby',
readonly: true
});
flask.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, 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](https://github.com/kazzkiq/CodeFlask.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 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](https://github.com/PrismJS/prism) and [Rollup](https://github.com/rollup/rollup).