A DraftJS plugin to add syntax highlighting support to your code blocks. Use in combination with draft-js-plugins.
First, create the plugin and add it to the plugins array of your PluginsEditor:
import Prism from 'prismjs'; import createPrismPlugin from 'draft-js-prism-plugin'; import "prismjs/themes/prism.css"; // add prism.css to add highlights class MyEditor extends React.Component { constructor(props) { super(props); const prismPlugin = createPrismPlugin({ // It's required to provide your own instance of Prism prism: Prism }); this.state = { plugins: [prismPlugin] } } render() { return ( <PluginsEditor plugins={this.state.plugins} /> ) } }
Now add a language key to the data of the code block you want to highlight:
// TODO: Somehow get a code block and its key, this is up to you const { block, key } = getCurrentBlock(); if (block.getType() !== "code-block") return; // Replace the code block with a new one with the data.language changed to "javascript" const data = block.getData().merge({ language: 'javascript' }); const newBlock = block.merge({ data }); const newContentState = currentContent.merge({ blockMap: blockMap.set(key, newBlock), selectionAfter: currentSelection }) // Now that code block will be highlighted as JavaScript! this.setState({ editorState: EditorState.push(editorState, newContentState, "change-block-data") })
This code uses the draft-js-prism decorator by @SamyPesse and is based on code extracted from the draft-js-markdown-shortcuts-plugin by @ngs.
Licensed under the MIT License, Copyright ©️ 2017 Space Program Inc. See LICENSE.md for more information.