Feature/toast ui 코드 하이라이터 가능하도록 처리

package.json

@@ -12,6 +12,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@toast-ui/editor": "^3.2.2",
+    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@toast-ui/react-editor": "^3.2.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.3",
@@ -20,6 +21,7 @@
     "axios": "^1.3.2",
     "cross-env": "^7.0.3",
     "luxon": "^3.2.1",
+    "prismjs": "^1.29.0",
     "react": "^17.0.1",
     "react-auth-code-input": "^3.2.1",
     "react-codes-input": "^2.2.3",
@@ -63,6 +65,7 @@
   "devDependencies": {
     "@craco/craco": "^7.0.0",
     "@types/luxon": "^3.2.0",
+    "@types/prismjs": "^1.26.4",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.60.1",
     "autoprefixer": "^10.4.13",

src/components/Editor/StandardEditor.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { useMediaQuery, useTheme } from '@mui/material';
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
 import { Editor, EditorProps } from '@toast-ui/react-editor';
+import Prism from 'prismjs';
+import './prismLang';
 
 import '@toast-ui/editor/dist/toastui-editor.css';
 import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
+import 'prismjs/themes/prism-tomorrow.css';
 
 interface StandardEditorProps extends EditorProps {
   forwardedRef?: React.MutableRefObject<Editor>;
@@ -24,6 +28,7 @@ const StandardEditor = ({ forwardedRef, ...props }: StandardEditorProps) => {
       language="ko"
       theme="dark"
       autofocus={false}
+      plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
       {...props}
     />
   );

src/components/Editor/prismLang.ts

@@ -0,0 +1,26 @@
+import 'prismjs/components/prism-markup-templating';
+
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-nasm';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-powershell';
+import 'prismjs/components/prism-r';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-latex';
+import 'prismjs/components/prism-solidity';
+import 'prismjs/components/prism-kotlin';
+import 'prismjs/components/prism-coffeescript';
+import 'prismjs/components/prism-xml-doc';

src/components/Viewer/StandardViewer.tsx

@@ -1,6 +1,11 @@
 import React, { useEffect, useRef } from 'react';
-import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
 import { Viewer } from '@toast-ui/react-editor';
+import Prism from 'prismjs';
+
+import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
+import 'prismjs/themes/prism-tomorrow.css';
 
 interface StandardViewerProps {
   content: string;
@@ -16,7 +21,12 @@ const StandardViewer = ({ content, className }: StandardViewerProps) => {
 
   return (
     <div className={className}>
-      <Viewer ref={viewerRef} initialValue={content} theme="dark" />
+      <Viewer
+        ref={viewerRef}
+        initialValue={content}
+        theme="dark"
+        plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
+      />
     </div>
   );
 };