Add delimiters of katex math and flavor of preview html setting featu…

…res.

README.md

@@ -68,7 +68,7 @@ This extension contributes the following settings:
 
 * `markdown-preview-showdown.flavor`:
 
-    Flavor of preview html page, you can choose one from ["github", "ghost", "vanilla"], default is "github" flavor.
+    Flavor of preview html page, you can choose one from ["github", "ghost", "vanilla", "original"], default flavor is "github".
 
 * `markdown-preview-showdown.fontSize`:
 
@@ -78,6 +78,10 @@ This extension contributes the following settings:
 
     Automatic scroll sync, default true.
 
+* `markdown-preview-showdown.katexDelimiters`:
+
+    Delimiters of katex math，format is {\"left\": \"chars\", \"right\": \"chars\", \"display\": true | false | undefined, \"asciimath\": true | undefined}; Multiple delimiters are separated by ',', example：{\"left\": \"$$\", \"right\": \"$$\", \"display\": true },{\"left\": \"\\(\", \"right\": \"\\)\"},{\"left\": \"@@\", \"right\": \"@@\", \"asciimath\": true}.
+
 * `markdown-preview-showdown.mermaidTheme`:
 
     Mermaid theme, you can choose one from ["default", "dark", "forest", "neutral"], default is "default" theme.

docs/demo.md

@@ -226,8 +226,6 @@ It's supported by [showdown-katex](https://github.com/obedm503/showdown-katex.gi
             <code content>
 
             <code content>
-
-            ...
             ```
 
   * Inline math
@@ -246,8 +244,6 @@ It's supported by [showdown-katex](https://github.com/obedm503/showdown-katex.gi
             <code content>
 
             <code content>
-
-            ...
             ```
 
   * Inline math

docs/media/webview.js

@@ -12,7 +12,8 @@
   mermaidTheme,
   vegaTheme,
   plantumlRenderMode,
-  plantumlWebsite
+  plantumlWebsite,
+  katexDelimiters
 ) {
   class ContextMenu {
     constructor(selector, menuItems) {
@@ -147,6 +148,7 @@
         options: {
           markdown: { flavor: markdownFlavor },
           vega: { theme: vegaTheme },
+          katex: { delimiters: katexDelimiters },
           mermaid: { theme: mermaidTheme },
           plantuml: { renderMode: plantumlRenderMode, umlWebSite: plantumlWebsite }
         }
@@ -165,11 +167,28 @@
 
     updateOptions() {
       if (this.config.options.markdown.flavor) {
-        previewer.addOptions(this.config.options.markdown);
+        previewer.setShowdownFlavor(this.config.options.markdown.flavor);
       }
       if (this.config.options.vega.theme) {
         previewer.setVegaOptions(Object.assign(this.config.options.vega, { renderer: 'svg' }));
       }
+      if (this.config.options.katex.delimiters) {
+        const options = JSON.parse('[' + this.config.options.katex.delimiters + ']');
+        if (Array.isArray(options)) {
+          let delimiters = [];
+          options.forEach((option) => {
+            if (option.hasOwnProperty('left') && option.hasOwnProperty('right')) {
+              if (!option.hasOwnProperty('display')) {
+                option.display = false;
+              }
+              delimiters.push(option);
+            }
+          });
+          if (delimiters.length) {
+            previewer.setKatexOptions({ delimiters: delimiters });
+          }
+        }
+      }
       if (this.config.options.mermaid.theme) {
         previewer.setMermaidOptions(this.config.options.mermaid);
       }
@@ -484,5 +503,6 @@
   typeof mermaid_theme === 'undefined' ? 'default' : mermaid_theme,
   typeof vega_theme === 'undefined' ? 'vox' : vega_theme,
   typeof plantuml_rendermode === 'undefined' ? 'local' : plantuml_rendermode,
-  typeof plantuml_website === 'undefined' ? 'www.plantuml.com/plantuml' : plantuml_website
+  typeof plantuml_website === 'undefined' ? 'www.plantuml.com/plantuml' : plantuml_website,
+  typeof katex_delimiters === 'undefined' ? '' : katex_delimiters
 );

docs/release-notes.md

@@ -1,5 +1,18 @@
 # Release Notes
 
+## v1.3.4
+1. Update [@jhuix/showdowns](https://github.com/jhuix/showdowns) v0.5.3:
+
+   - Optimize showdown and converter objects of markdown parse, add flavor setting features.
+
+   - Add delimiters setting of katex math features.
+
+2. Add delimiters setting of katex math features.
+
+3. Add flavor setting of preview html features.
+
+4. Optimized preview html page.
+
 ## v1.3.3
 1. Update [@jhuix/showdowns](https://github.com/jhuix/showdowns) v0.5.2:
 

media/webview.js

@@ -12,7 +12,8 @@
   mermaidTheme,
   vegaTheme,
   plantumlRenderMode,
-  plantumlWebsite
+  plantumlWebsite,
+  katexDelimiters
 ) {
   class ContextMenu {
     constructor(selector, menuItems) {
@@ -147,6 +148,7 @@
         options: {
           markdown: { flavor: markdownFlavor },
           vega: { theme: vegaTheme },
+          katex: { delimiters: katexDelimiters },
           mermaid: { theme: mermaidTheme },
           plantuml: { renderMode: plantumlRenderMode, umlWebSite: plantumlWebsite }
         }
@@ -165,11 +167,28 @@
 
     updateOptions() {
       if (this.config.options.markdown.flavor) {
-        previewer.addOptions(this.config.options.markdown);
+        previewer.setShowdownFlavor(this.config.options.markdown.flavor);
       }
       if (this.config.options.vega.theme) {
         previewer.setVegaOptions(Object.assign(this.config.options.vega, { renderer: 'svg' }));
       }
+      if (this.config.options.katex.delimiters) {
+        const options = JSON.parse('[' + this.config.options.katex.delimiters + ']');
+        if (Array.isArray(options)) {
+          let delimiters = [];
+          options.forEach((option) => {
+            if (option.hasOwnProperty('left') && option.hasOwnProperty('right')) {
+              if (!option.hasOwnProperty('display')) {
+                option.display = false;
+              }
+              delimiters.push(option);
+            }
+          });
+          if (delimiters.length) {
+            previewer.setKatexOptions({ delimiters: delimiters });
+          }
+        }
+      }
       if (this.config.options.mermaid.theme) {
         previewer.setMermaidOptions(this.config.options.mermaid);
       }
@@ -484,5 +503,6 @@
   typeof mermaid_theme === 'undefined' ? 'default' : mermaid_theme,
   typeof vega_theme === 'undefined' ? 'vox' : vega_theme,
   typeof plantuml_rendermode === 'undefined' ? 'local' : plantuml_rendermode,
-  typeof plantuml_website === 'undefined' ? 'www.plantuml.com/plantuml' : plantuml_website
+  typeof plantuml_website === 'undefined' ? 'www.plantuml.com/plantuml' : plantuml_website,
+  typeof katex_delimiters === 'undefined' ? '' : katex_delimiters
 );

package.json

@@ -83,6 +83,22 @@
           "default": true,
           "type": "boolean"
         },
+        "markdown-preview-showdown.flavor": {
+          "description": "%mdps.flavor%",
+          "default": "github",
+          "type": "string",
+          "enum": [
+            "github",
+            "ghost",
+            "vanilla",
+            "original"
+          ]
+        },
+        "markdown-preview-showdown.katexDelimiters": {
+          "description": "%mdps.katexDelimiters%",
+          "default": "",
+          "type": "string"
+        },
         "markdown-preview-showdown.mermaidTheme": {
           "description": "%mdps.mermaidTheme%",
           "default": "default",
@@ -169,7 +185,7 @@
     "typescript": "^4.0.2"
   },
   "dependencies": {
-    "@jhuix/showdowns": "^0.5.2",
+    "@jhuix/showdowns": "^0.5.3",
     "mkdirp": "^1.0.4",
     "plantuml-style-c4": "^1.1.3",
     "puppeteer-core": "^5.3.0",

package.nls.json

@@ -6,12 +6,13 @@
   "mdps.autoPreview": "Automatic preview markdown file.",
   "mdps.fontSize": "Custom font size of preview page.",
   "mdps.scrollSync": "Automatic scroll sync.",
-  "mdps.flavor": "Markdown render flavor, you can choose one from [\"github\", \"ghost\", \"vanilla\", \"original\"], default flavor is \"github\"",
-  "mdps.mermaidTheme": "Mermaid theme, you can choose one from [\"default\", \"dark\", \"forest\", \"neutral\"]",
-  "mdps.vegaTheme": "Vega theme, you can choose one from [\"excel\", \"ggplot2\", \"quartz\", \"vox\", \"dark\"], default theme is \"vox\"",
-  "mdps.plantumlTheme": "Plantuml theme, you can choose one from [\"default\", \"nature\", \"c4\", \"c4-handwrite\"]",
+  "mdps.flavor": "Flavor of preview html page, you can choose one from [\"github\", \"ghost\", \"vanilla\", \"original\"], default flavor is \"github\".",
+  "mdps.mermaidTheme": "Mermaid theme, you can choose one from [\"default\", \"dark\", \"forest\", \"neutral\"].",
+  "mdps.katexDelimiters": "Delimiters of katex math，format is {\"left\": \"chars\", \"right\": \"chars\", \"display\": true | false | undefined, \"asciimath\": true | undefined}; Multiple delimiters are separated by ',', example：{\"left\": \"$$\", \"right\": \"$$\", \"display\": true },{\"left\": \"\\(\", \"right\": \"\\)\"},{\"left\": \"@@\", \"right\": \"@@\", \"asciimath\": true}.",
+  "mdps.vegaTheme": "Vega theme, you can choose one from [\"excel\", \"ggplot2\", \"quartz\", \"vox\", \"dark\"], default theme is \"vox\".",
+  "mdps.plantumlTheme": "Plantuml theme, you can choose one from [\"default\", \"nature\", \"c4\", \"c4-handwrite\"].",
   "mdps.plantumlRenderMode": "The mode of rendering plant UML diagram, you can choose one from [\"local\", \"remote\"]: the default mode is \"local\", which means local rendering, but local rendering requires Java support, so Java environment needs to be installed and the Java executor directory needs to be set to the global path environment variable; while the mode \"remote\" means remote rendering, which means the setting item of plantumlWebsite needs to be set as the remote rendering URL.",
-  "mdps.plantumlWebsite": "When the setting item of plantumlrendermode is mode \"remote\", the remote rendering website to be set, default web site is \"www.plantuml.com/plantuml\"",
+  "mdps.plantumlWebsite": "When the setting item of plantumlrendermode is mode \"remote\", the remote rendering website to be set, default web site is \"www.plantuml.com/plantuml\".",
   "mdps.usePuppeteerCore": "If set to true, then locally installed puppeteer-core will be required. Otherwise, the puppeteer globally installed by `npm install -g puppeteer` will be required.",
   "mdps.puppeteerWaitForTimeout": "Puppeteer waits for a certain timeout in milliseconds before the document export.",
   "mdps.chromePath": "Chrome executable path, which is used for Puppeteer export. Leaving it empty means the path will be found automatically."

package.nls.zh-cn.json

@@ -3,16 +3,17 @@
   "mdps.description": "A excellent markdown preview extension for Visual Studio Code",
   "mdps.title": "MDPS - MarkDown文件预览",
   "mdps.openPreview": "预览MD文件",
-  "mdps.autoPreview": "自动预览markdown文件.",
-  "mdps.fontSize": "预览页面的自定义字体大小.",
-  "mdps.scrollSync": "自动同步滚屏.",
-  "mdps.flavor": "渲染Markdown的风格，可选择项为[\"github\", \"ghost\", \"vanilla\", \"original\"],默认风格为\"github\"",
-  "mdps.mermaidTheme": "渲染Mermaid图表的主题式样, 可选择项为[\"default\", \"dark\", \"forest\", \"neutral\"], 默认主题为\"default\"",
-  "mdps.vegaTheme": "渲染Vega图表的主题式样, 可选择项为[\"excel\", \"ggplot2\", \"quartz\", \"vox\", \"dark\"], 默认主题为\"vox\"",
-  "mdps.plantumlTheme": "渲染plant uml图的的主题式样, 可选择项为[\"default\", \"nature\", \"c4\", \"c4-handwrite\"], 默认主题为\"default\"",
-  "mdps.plantumlRenderMode": "渲染plant uml图的模式, 可选择项为[\"local\", \"remote\"]： 默认模式为\"local\"，表示为本地渲染，但是本地渲染需要JAVA支持，因而需要安装JAVA环境并设置java执行程序目录至全局PATH环境变量中；而模式\"remote\"表示远程渲染，需要设置plantumlWebsite设置项为远程渲染网址。",
-  "mdps.plantumlWebsite": "当设置项plantumlRenderMode为模式\"remote\"时，需设置的远程渲染网址, 默认网址为\"www.plantuml.com/plantuml\"",
-  "mdps.usePuppeteerCore": "若该值为真, 则使用当前插件下安装使用puppeteer-core包（插件自身会自动安装）; 否则需要使用脚本`npm install -g puppeteer`手动来全局安装使用puppeteer包并.",
-  "mdps.puppeteerWaitForTimeout": "在导出文件时, Puppeteer包执行导出过程运行相关进程的等待时间, 单位毫秒, 默认值为0表示无限等待直到自动完成导出.",
-  "mdps.chromePath": "使用Puppeteer包导出文件时, 需设置的Chrome浏览器执行文件（chrome.exe）的文件绝对路径; 该值为空时,则表示导出时会自动寻找Chrome浏览器的安装路径."
+  "mdps.autoPreview": "自动预览markdown文件。",
+  "mdps.fontSize": "预览页面的自定义字体大小。",
+  "mdps.scrollSync": "自动同步滚屏。",
+  "mdps.flavor": "预览HTML页面的风格，可选择项为[\"github\", \"ghost\", \"vanilla\", \"original\"],默认风格为\"github\"。",
+  "mdps.mermaidTheme": "渲染Mermaid图表的主题式样, 可选择项为[\"default\", \"dark\", \"forest\", \"neutral\"], 默认主题为\"default\"。",
+  "mdps.katexDelimiters": "Katex数学公式的分割标识，格式为{\"left\": \"chars\", \"right\": \"chars\", \"display\": true | false | undefined, \"asciimath\": true | undefined}； 有多项分割标识用逗号分隔, 例如：{\"left\": \"$$\", \"right\": \"$$\", \"display\": true },{\"left\": \"\\(\", \"right\": \"\\)\"},{\"left\": \"@@\", \"right\": \"@@\", \"asciimath\": true}。",
+  "mdps.vegaTheme": "渲染Vega图表的主题式样, 可选择项为[\"excel\", \"ggplot2\", \"quartz\", \"vox\", \"dark\"], 默认主题为\"vox\"。",
+  "mdps.plantumlTheme": "渲染plant uml图的的主题式样, 可选择项为[\"default\", \"nature\", \"c4\", \"c4-handwrite\"], 默认主题为\"default\"。",
+  "mdps.plantumlRenderMode": "渲染plant uml图的模式, 可选择项为[\"local\", \"remote\"]： 默认模式为\"local\"，表示为本地渲染，但是本地渲染需要JAVA支持，因而需要安装JAVA环境并设置java执行程序目录至全局PATH环境变量中；而模式\"remote\"表示远程渲染，需要设置plantumlWebsite设置项为远程渲染网址。。",
+  "mdps.plantumlWebsite": "当设置项plantumlRenderMode为模式\"remote\"时，需设置的远程渲染网址, 默认网址为\"www.plantuml.com/plantuml\"。",
+  "mdps.usePuppeteerCore": "若该值为真, 则使用当前插件下安装使用puppeteer-core包（插件自身会自动安装）; 否则需要使用脚本`npm install -g puppeteer`手动来全局安装使用puppeteer包并。",
+  "mdps.puppeteerWaitForTimeout": "在导出文件时, Puppeteer包执行导出过程运行相关进程的等待时间, 单位毫秒, 默认值为0表示无限等待直到自动完成导出。",
+  "mdps.chromePath": "使用Puppeteer包导出文件时, 需设置的Chrome浏览器执行文件（chrome.exe）的文件绝对路径; 该值为空时,则表示导出时会自动寻找Chrome浏览器的安装路径。"
 }

src/config.ts

@@ -18,6 +18,7 @@ export class PreviewConfig {
   public fontSize: number;
   public scrollSync: boolean;
   public flavor: string;
+  public katexDelimiters: string;
   public mermaidTheme: string;
   public vegaTheme: string;
   public plantumlTheme: string;
@@ -63,6 +64,9 @@ export class PreviewConfig {
       tmpStr = config.get('flavor');
       this.flavor = typeof tmpStr === 'undefined' ? 'github' : tmpStr;
 
+      tmpStr = config.get('katexDelimiters');
+      this.katexDelimiters = typeof tmpStr === 'undefined' ? '' : tmpStr;
+
       tmpStr = config.get('plantumlRenderMode');
       this.plantumlRenderMode = typeof tmpStr === 'undefined' ? 'local' : tmpStr;
 
@@ -82,6 +86,7 @@ export class PreviewConfig {
       this.fontSize = PreviewConfig.defaultFontSize;
       this.scrollSync = true;
       this.flavor = 'github';
+      this.katexDelimiters = '';
       this.mermaidTheme = 'default';
       this.vegaTheme = 'vox';
       this.plantumlTheme = 'default';

src/plantuml.ts

@@ -7,7 +7,6 @@
 import * as child_process from 'child_process';
 import * as path from 'path';
 
-const { debounce } = require('throttle-debounce');
 const extensionDirectoryPath = path.resolve(__dirname, '../');
 const PlantumlJarPath = path.resolve(extensionDirectoryPath, 'media/plantuml/plantuml.jar');
 
@@ -43,9 +42,6 @@ class PlantumlRenderer {
   private resolves: Array<(result: string) => void>;
   private closeResolves: Array<(result: string) => void>;
   private render: child_process.ChildProcessWithoutNullStreams | null;
-  private endRender = debounce(1000, (render: child_process.ChildProcessWithoutNullStreams) => {
-    render.stdin.end();
-  });
 
   public constructor(fileDirectoryPath: string) {
     this.fileDirectoryPath = fileDirectoryPath;
@@ -63,15 +59,15 @@ class PlantumlRenderer {
         this.resolves.push(resolve);
         this.render.stdin.write(content + '\n');
         if (count === 0) {
-          this.endRender(this.render);
+          this.render.stdin.end();
         } else if (count > 0) {
           if (this.count === 0) {
               this.count = count;
           }
           --this.count;
           if (this.count <= 0) {
             this.count = 0;
-            this.endRender(this.render);
+            this.render.stdin.end();
           }
         }
       } else {

src/previewer.ts

@@ -775,21 +775,22 @@ export class ShowdownPreviewer {
 <link rel="stylesheet" href="${this.changeFileProtocol(webview, `media/contextmenu.css`, true)}">
 </head>
 <body>
-<script nonce="${this.getNonce()}" src="${this.changeFileProtocol(
-      webview,
-      `node_modules/@jhuix/showdowns/dist/showdowns.min.js`,
-      true
-    )}"></script>
 <script>
 var markdown_flavor = "${this.config.flavor}";
 var mermaid_theme = "${this.config.mermaidTheme}";
 var vega_theme = "${this.config.vegaTheme}";
 var plantuml_rendermode = "${this.config.plantumlRenderMode}";
 var plantuml_website = "${this.config.plantumlWebsite}";
+var katex_delimiters = \`${this.config.katexDelimiters}\`;
 var uri_path = "${path.dirname(uri.fsPath).replace(/\\/g, `/`)}";
 var scheme_default = "${this.changeFileProtocol(webview, `node_modules/`, true)}";
 var scheme_dist = "${this.changeFileProtocol(webview, `node_modules/@jhuix/showdowns/dist/`, true)}";
 </script>
+<script nonce="${this.getNonce()}" src="${this.changeFileProtocol(
+  webview,
+  `node_modules/@jhuix/showdowns/dist/showdowns.min.js`,
+  true
+)}"></script>
 <script nonce="${this.getNonce()}" src="${this.changeFileProtocol(webview, `media/webview.js`, true)}"></script>
 </body>
 </html>`;
@@ -826,6 +827,7 @@ var scheme_dist = "${this.changeFileProtocol(webview, `node_modules/@jhuix/showd
       const options = {
         markdown: { flavor: this.config.flavor },
         mermaid: { theme: this.config.mermaidTheme },
+        katex: { delimiters: this.config.katexDelimiters },
         vega: { theme: this.config.vegaTheme },
         plantuml: {
           renderMode: this.config.plantumlRenderMode,