✨ Feature: 에디터 syntax-highlight 설정 (#11)

selab-hs · Apr 6, 2022 · d339ab3 · d339ab3
1 parent 2b1c467
commit d339ab3
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/components/TuiEditor/index.tsx b/components/TuiEditor/index.tsx
@@ -1,10 +1,27 @@
-import 'codemirror/lib/codemirror.css';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-xml-doc.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-kotlin.js';
+
 import '@toast-ui/editor/dist/toastui-editor.css';
-import { MutableRefObject, useRef } from 'react';
-import * as S from './style';
 import { Editor } from '@toast-ui/react-editor';
+
+import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
+
+import { MutableRefObject, useRef } from 'react';
 import { useGetWindowSize } from '../../hooks/useGetWindowSize';
 import { deviceSize } from '../../styles/mediaQuery';
+import * as S from './style';
 
 export default function TuiEditor() {
   const editorRef = useRef<Editor>();
@@ -14,18 +31,19 @@ export default function TuiEditor() {
   function handleSubmit() {
     if (!editorRef.current) return;
 
-    const editorData = editorRef.current.getInstance().getHtml();
+    const editorData = editorRef.current.getInstance().getHTML();
 
     console.log(editorData);
   }
 
   return (
     <S.Wrapper>
       <Editor
-        initialValue="write post"
+        initialValue="console.log('hi');"
         ref={editorRef as MutableRefObject<Editor>}
         height="100%"
         previewStyle={windowSize > deviceSize.mobile ? 'vertical' : 'tab'}
+        plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
       />
       <div onClick={handleSubmit}>전송!</div>
     </S.Wrapper>