You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Oct 11, 2022. It is now read-only.
A DraftJS plugin to add syntax highlighting support to your code blocks. Use in combination with draft-js-plugins.
Usage
First, create the plugin and add it to the plugins array of your PluginsEditor:
importPrismfrom'prismjs';importcreatePrismPluginfrom'draft-js-prism-plugin';import"prismjs/themes/prism.css";// add prism.css to add highlights classMyEditorextendsReact.Component{constructor(props){super(props);constprismPlugin=createPrismPlugin({// It's required to provide your own instance of Prismprism: Prism});this.state={plugins: [prismPlugin]}}render(){return(<PluginsEditorplugins={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 youconst{ block, key }=getCurrentBlock();if(block.getType()!=="code-block")return;// Replace the code block with a new one with the data.language changed to "javascript"constdata=block.getData().merge({language: 'javascript'});constnewBlock=block.merge({ data });constnewContentState=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")})