Add markdown-it parser with syntax highlight

Vigilans · Vigilans · commit 221ff298f977 · 2019-03-08T01:03:24.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -287,7 +287,9 @@
     },
     "devDependencies": {
         "@types/fs-extra": "5.0.0",
+        "@types/highlight.js": "^9.12.3",
         "@types/lodash.kebabcase": "^4.1.5",
+        "@types/markdown-it": "0.0.7",
         "@types/mocha": "^2.2.42",
         "@types/node": "^7.0.43",
         "@types/require-from-string": "^1.2.0",
@@ -297,8 +299,10 @@
     },
     "dependencies": {
         "fs-extra": "^6.0.1",
-        "vsc-leetcode-cli": "2.6.2",
+        "highlight.js": "^9.15.6",
         "lodash.kebabcase": "^4.1.1",
-        "require-from-string": "^2.0.2"
+        "markdown-it": "^8.4.2",
+        "require-from-string": "^2.0.2",
+        "vsc-leetcode-cli": "2.6.2"
     }
 }
diff --git a/src/leetCodeSolutionProvider.ts b/src/leetCodeSolutionProvider.ts
@@ -1,16 +1,25 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
+import * as hljs from "highlight.js";
+import * as MarkdownIt from "markdown-it";
 import { Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
 import { Solution } from "./shared";
 
 class LeetCodeSolutionProvider implements Disposable {
 
     private context: ExtensionContext;
     private panel: WebviewPanel | undefined;
+    private markdown: MarkdownIt;
+    private solution: Solution;
 
     public initialize(context: ExtensionContext): void {
         this.context = context;
+        this.markdown = new MarkdownIt({
+            linkify: true,
+            typographer: true,
+            highlight: this.codeHighlighter.bind(this),
+        });
     }
 
     public async show(solutionString: string): Promise<void> {
@@ -25,9 +34,9 @@ class LeetCodeSolutionProvider implements Disposable {
             }, null, this.context.subscriptions);
         }
 
-        const solution: Solution = this.parseSolution(solutionString);
-        this.panel.title = solution.title;
-        this.panel.webview.html = this.getWebViewContent(solution.body);
+        this.solution = this.parseSolution(solutionString);
+        this.panel.title = this.solution.title;
+        this.panel.webview.html = this.getWebViewContent(this.solution.body);
         this.panel.reveal(ViewColumn.Active);
     }
 
@@ -50,20 +59,35 @@ class LeetCodeSolutionProvider implements Disposable {
         return solution;
     }
 
-    private getWebViewContent(result: string): string {
-        return `
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>LeetCode Top Voted Solution</title>
-            </head>
-            <body>
-                <pre>${result}</pre>
-            </body>
-            </html>
-        `;
+    private codeHighlighter(code: string, lang: string | undefined): string {
+        if (!lang) {
+            lang = this.solution.lang;
+        }
+        // tslint:disable-next-line:typedef
+        const hljst = hljs;
+        if (hljst.getLanguage(lang)) {
+            try {
+                return hljst.highlight(lang, code).value;
+            } catch (error) { /* do not highlight */ }
+        }
+        return ""; // use external default escaping
+    }
+
+    private getWebViewContent(body: string): string {
+        return this.markdown.render(body);
+        // return `
+        //     <!DOCTYPE html>
+        //     <html lang="en">
+        //     <head>
+        //         <meta charset="UTF-8">
+        //         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        //         <title>LeetCode Top Voted Solution</title>
+        //     </head>
+        //     <body>
+        //         <pre>${body}</pre>
+        //     </body>
+        //     </html>
+        // `;
     }
 }
 
