feat: Enabled syntax highlight to a code block

package.json

@@ -55,6 +55,7 @@
     "@types/webscopeio__react-textarea-autocomplete": "4.6.1",
     "@webscopeio/react-textarea-autocomplete": "4.6.3",
     "dompurify": "2.0.12",
+    "highlight.js": "10.1.1",
     "marked": "1.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1"

src/app/markdown/renderer/highlight-settings.ts

@@ -0,0 +1,53 @@
+const red = "color: #d91e18;";
+const orange = "color: #aa5d00;";
+const yellow = "color: #ffd700;";
+const green = "color: #008000;";
+const blue = "color: #007faa;";
+const purple = "color: #7928a1;";
+const bold = "font-weight: bold;";
+
+export const highlightStyles: { [index: string]: string } = {
+  "hljs-comment": "color: #696969;",
+  "hljs-quote": "color: #696969;",
+  "hljs-meta": orange,
+  "hljs-meta-keyword": orange,
+  "hljs-meta-string": blue,
+  "hljs-variable": red,
+  "hljs-template-variable": red,
+  "hljs-tag": red,
+  "hljs-name": red,
+  "hljs-selector-id": red,
+  "hljs-selector-class": red,
+  "hljs-regexp": red,
+  "hljs-deletion": red,
+  "hljs-number": orange,
+  "hljs-built_in": orange,
+  "hljs-builtin-name": orange,
+  "hljs-literal": orange,
+  "hljs-type": orange,
+  "hljs-params": "",
+  "hljs-link": orange,
+  "hljs-attribute": yellow,
+  "hljs-string": green,
+  "hljs-symbol": green,
+  "hljs-bullet": green,
+  "hljs-addition": green,
+  "hljs-title": blue,
+  "hljs-section": blue,
+  "hljs-keyword": purple,
+  "hljs-selector-tag": purple,
+  "hljs-emphasis": "font-style: italic;",
+  "hljs-strong": bold,
+  "hljs-class": bold,
+};
+
+export const languageAliases: { [index: string]: string } = {
+  zsh: "bash",
+  sh: "bash",
+  "c++": "cpp",
+  html: "xml",
+  js: "javascript",
+  ts: "typescript",
+  kt: "kotlin",
+  yaml: "yml",
+};

src/app/markdown/renderer/marktone-renderer.ts

@@ -1,6 +1,8 @@
 import { MarkedOptions, Renderer } from "marked";
 import MentionReplacer from "../replacer/mention-replacer";
 import KintoneClient from "../../kintone/kintone-client";
+import hljs from "highlight.js";
+import { highlightStyles, languageAliases } from "./highlight-settings";
 
 class MarktoneRendererHelper {
   static escapeHTML(html: string): string {
@@ -20,6 +22,25 @@ class MarktoneRendererHelper {
 
     return html;
   }
+
+  static highlightCode(code: string, specifiedLanguage: string): string {
+    let language = specifiedLanguage;
+
+    if (!hljs.listLanguages().includes(specifiedLanguage)) {
+      language = languageAliases[specifiedLanguage] || "plaintext";
+    }
+    let afterCode = hljs.highlight(language, code).value;
+    afterCode = afterCode.replace(
+      /class="([\w-]+)"/g,
+      (matchedString, className) => {
+        const style = highlightStyles[className];
+        if (style === undefined) return matchedString;
+        return `style="${style}"`;
+      }
+    );
+
+    return afterCode;
+  }
 }
 
 interface Render {
@@ -67,15 +88,16 @@ class MarktoneRenderer extends Renderer {
   }
 
   code(code: string, language: string, isEscaped: boolean): string {
-    const escapedCode = isEscaped
-      ? code
-      : MarktoneRendererHelper.escapeHTML(code);
+    const escapedCodeWithHighlight = MarktoneRendererHelper.highlightCode(
+      code,
+      language
+    );
     const preStyle =
       "background-color: #f6f8fa; border-radius: 3px; padding: 8px 16px;";
     const codeStyle = `font-family: ${this.monospaceFontFamiliesString};`;
     console.log(codeStyle);
 
-    return `<pre style="${preStyle}"><code style="${codeStyle}">${escapedCode}</code></pre>`;
+    return `<pre style="${preStyle}"><code style="${codeStyle}">${escapedCodeWithHighlight}</code></pre>`;
   }
 
   blockquote(quote: string): string {