@@ -4,14 +4,55 @@ A DraftJS plugin to add syntax highlighting support to your code blocks. Use in
44
55## Usage
66
7+ First, create the plugin and add it to the ` plugins ` array of your PluginsEditor:
8+ 79``` JS
810import Prism from ' prismjs'
911import createPrismPlugin from ' draft-js-prism-plugin'
1012
11- const prismPlugin = createPrismPlugin ({
12- // Provide your own instance of PrismJS
13- prism: Prism
14- });
13+ class MyEditor extends React .Component {
14+ constructor (props ) {
15+ super (props);
16+ 17+ const prismPlugin = createPrismPlugin ({
18+ // It's required to provide your own instance of Prism
19+ prism: Prism
20+ });
21+ 22+ this .state = {
23+ plugins: [prismPlugin]
24+ }
25+ }
26+ 27+ render () {
28+ return (
29+ < PluginsEditor
30+ plugins= {this .state .plugins }
31+ / >
32+ )
33+ }
34+ }
35+ ```
36+ 37+ Now add a ` language ` key to the data of the code block you want to highlight:
38+ 39+ ``` JS
40+ // TODO: Somehow get a code block and its key, this is up to you
41+ const { block , key } = getCurrentBlock ();
42+ if (block .getType () !== " code-block" return ;
43+ 44+ // Replace the code block with a new one with the data.language changed to "javascript"
45+ const data = block .getData ().merge ({ language: ' javascript'
46+ const newBlock = block .merge ({ data });
47+ const newContentState = currentContent .merge ({
48+ blockMap: blockMap .set (key, newBlock),
49+ selectionAfter: currentSelection
50+ })
51+ 52+ // Now that code block will be highlighted as JavaScript!
53+ this .setState ({
54+ editorState: EditorState .push (editorState, newContentState, " change-block-data"
55+ })
1556```
1657
1758## License
0 commit comments