How to use code syntax highlight plugin in react wrapper

[zzzmj]

Summary

How to use code syntax highlight plugin in react wrapper

Screenshot

Version

Write the version of the editor you are currently using.

Additional context

import { Editor } from '@toast-ui/react-editor';
import hljs from 'highlight.js';
import codeSyntaxHightlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

//...

<Editor
  className="editor"
  ref={editorEl}
  previewStyle="vertical"
  height="600px"
  initialEditType="markdown"
  plugins={[
    [codeSyntaxHightlight, { hljs }]
  ]}
/>

[DoonDoony]

@zzzmj

In my case, It worked using .bind(hljs)
e.g,.

import React from "react";
import 'codemirror/lib/codemirror.css';
import 'highlight.js/styles/github.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from "@toast-ui/react-editor";
import colorSyntaxPlugin from "@toast-ui/editor-plugin-color-syntax";
import hljs from "highlight.js";
import codeSyntaxHighlightPlugin from "@toast-ui/editor-plugin-code-syntax-highlight";



export default class App extends React.Component<any, any> {
  render() {
    return (
      <div>
        <Editor
          initialValue="Hello World"
          previewStyle="vertical"
          height="600px"
          plugins={[codeSyntaxHighlightPlugin.bind(hljs), colorSyntaxPlugin]}
        />
      </div>
    );
  }
}

[zzzmj]

@zzzmj

In my case, It worked using .bind(hljs)
e.g,.

import React from "react";
import 'codemirror/lib/codemirror.css';
import 'highlight.js/styles/github.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor/dist/toastui-editor.css';

import { Editor } from "@toast-ui/react-editor";
import colorSyntaxPlugin from "@toast-ui/editor-plugin-color-syntax";
import hljs from "highlight.js";
import codeSyntaxHighlightPlugin from "@toast-ui/editor-plugin-code-syntax-highlight";



export default class App extends React.Component<any, any> {
  render() {
    return (
      <div>
        <Editor
          initialValue="Hello World"
          previewStyle="vertical"
          height="600px"
          plugins={[codeSyntaxHighlightPlugin.bind(hljs), colorSyntaxPlugin]}
        />
      </div>
    );
  }
}

thank you...

I fixed the problem by reinstalling the @toast-ui/editor-plugin-code-syntax-highlight