https://www.npmjs.com/package/@toast-ui/editor-plugin-code-syntax-highlight
여기에서는 아래와 같은 정보만 준다.
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import Editor from '@toast-ui/editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
const editor = new Editor({
// ...
plugins: [codeSyntaxHighlight]
});
@toast-ui/editor-plugin-code-syntax-highlight
를 설치하고
Editor 요소의 옵션으로 plugins={[codeSyntaxHighlight]}
를 설정하는 것만으로는 안됐다.
https://nhn.github.io/tui.editor/latest/tutorial-example08-editor-with-code-syntax-highlight-plugin
여기에서는 옵션을 [[codeSyntaxHighlight, { highlighter: Prism }]]
이렇게 설정했길래 prismjs
를 설치하고 import해와서 사용했다.
-> 내가 아까는 다르게 작성했던 건지 에디터를 v3.1.1로 낮춰서인지 지금은 이거만 적용해도 바로 된다...
Toast UI 깃허브 issue 탭을 뒤져서 나와 비슷한 케이스들을 발견했다.
https://github.com/nhn/tui.editor/issues/1564
https://github.com/nhn/tui.editor/issues/2101
hightlight.js
, tui-color-picker
, @toast-ui/editor-plugin-color-syntax
설치해서
[codeSyntaxHighlightPlugin, {hljs}]
이렇게도 해보고
콘솔에 에러가 안나지만 작동은 안하기도 하고...
과정 중에 콘솔에 language가 없다는 에러도 났는데
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import { Editor } from '@toast-ui/react-editor';
import colorSyntaxPlugin from '@toast-ui/editor-plugin-color-syntax';
import codeSyntaxHighlightPlugin from '@toast-ui/editor-plugin-code-syntax-highlight';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
import 'prismjs/themes/prism.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
이렇게 설치 & 임포트해왔다.
toast ui github issue에서 발견한 방법인 package.json에서"@toast-ui/react-editor": "3.1.1",
버전을 꺾쇠 없이 설정도 해주고
plugins={[codeSyntaxHighlightPlugin.bind(hljs)]}
이렇게 작성하니까 됐다.
plugins={[
codeSyntaxHighlightPlugin.bind(hljs),
codeSyntaxHighlight,
colorSyntaxPlugin,
]}
useCommandShortcut={true}
hideModeSwitch={true}
useDefaultHTMLSanitizer={true}
넣으라는거 다 넣기
그리고 하나씩 빼면서 어디서 오류가 나는지 지켜봤다.
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
"@toast-ui/react-editor": "^3.1.1",
"prismjs": "^1.29.0",
버전명에 꺾쇠도 다시 붙여보고
위 세가지 빼고 에디터 관련 모듈은 모두 삭제했는데 잘 된다.
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import 'prismjs/themes/prism.css';
import Prism from 'prismjs';
import { Editor } from '@toast-ui/react-editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
...
const MarkdownEditor = (props, ref) => {
return (
<Editor
plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
....
/>
....
)
};
codeSyntaxHighlight
& 옵션으로 Prism
설정만 해줘도 잘 됐다.
야호~
버전의 오류 또는 내가 코드를 잘못 쓴 걸 돌아돌아 해결한 것 같다.😅
리액트18버전에서 토스트Ui 적용할라는데 쉽지 않네요ㅜㅜ