editorjs-codemirror
v0.1.3
Published
CodeMirror Tool for Editor.js
Downloads
36
Maintainers
Readme
CodeMirror Tool for Editor.js
CodeMirror Tool for the Editor.js allows to include code examples in your articles.
Installation
Install via NPM
Get the package
# npm
$ npm install codemirror editorjs-codemirror
# yarn
$ yarn add codemirror editorjs-codemirror
Include module at your application
import CodeMirror from 'editorjs-codemirror'
Usage
Add the CodeMirror Tool to the tools
property of the Editor.js initial config.
import EditorJS from '@editorjs/editorjs'
import CodeMirror from 'editorjs-codemirror'
export const tools = {
// ...
code: CodeMirror
// ...
}
Default config
Default supported languages: Javascript
/ HTML
/ CSS
{
languages: [{
name: 'Javascript',
mode: "text/javascript"
}, {
name: 'HTML',
mode: "text/html"
}, {
name: 'CSS',
mode: "text/css"
}],
codeMirrorConfig: {
lineNumbers: true,
matchBrackets: true,
autoCloseTags: true,
tabSize: 2,
keyMap: "sublime",
}
}
Config Params
| Field | Type | Description | | ---------------- | ------ | ---------------------------------------- | | languages | Array | Customize additional supported languages | | codeMirrorConfig | Object | CodeMirror config |
Code example
import mode or theme from codemirror package:
import CodeMirror from 'editorjs-codemirror';
import 'codemirror/mode/shell/shell'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/jsx/jsx'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/mode/sass/sass'
import 'codemirror/theme/idea.css'
export const tools = {
codeMirror: {
class: CodeMirror,
config: {
languages: [
{
name: 'Shell',
mode: "application/x-sh"
}, {
name: 'JSX',
mode: "text/typescript-jsx"
}, {
name: 'Vue',
mode: "text/x-vue"
}, {
name: 'MarkDown',
mode: "text/x-markdown"
}, {
name: 'SASS',
mode: "text/x-sass"
}
],
codeMirrorConfig: {
tabSize: 4,
styleActiveLine: { nonEmpty: true },
styleActiveSelected: true,
line: false,
foldGutter: true,
autofocus: false,
styleSelectedText: true,
showCursorWhenSelecting: true,
dragDrop: true,
lint: true,
theme: 'idea',
extraKeys: { 'Ctrl': 'autocomplete' },
hintOptions: {
completeSingle: false
},
}
}
}
}
Output data
CSS mode output
{
mode: "text/css"
name: "CSS"
text: "body {\n padding: 0\n}"
}