Mathjax html output for webview added

CHANGELOG.md

@@ -77,20 +77,24 @@ All notable changes to the "lammps_vscode" extension will be documented in this
    - Autocomplete suggestions are now only triggered at the beginning of lines
  - Grammar
    - Keywords updated 
-   - Updates to Grammar rules to avoid some false positive 
+   - Updates to Grammar rules to avoid some false positives 
  - Offline embedded documentation
    - Improved layout of "Note" and "Warning" sections
    - fix missing rst-file includes 
    - fixed several formatting issues
    - added Syntax highlighting support through vscode-textmate and markdown-it.
    - added standard light/dark css-files to control syntax highlighting in the webview. (because Token-Colors are not exposed through vscode API yet)
- - Depencies added:
+ - Dependencies added:
    - markdown-it
    - plist
    - request
-   - underscore-plus
    - vscode-oniguruma
    - vscode-textmate
+
+## Version 1.4.1 14.09.2020
+ - Offline embedded documentation
+   - Styling improvements for rendering of tables, generic text and *Note* blocks
+   - Math rendering changed to html for webview, now allowing to use theme colors for equations in the documentation panel
 
 
 

css/lmps_dark.css

@@ -1,18 +1,38 @@
-body.vscode-light {
-    color: black;
+body {
+    text-align: justify;
 }
 
-body.vscode-dark {
-    color: white;
+table {
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
 }
 
-body.vscode-high-contrast {
-    color: white;
+svg {
+    color: var(--vscode-editor-foreground);
+}
+
+table th {
+    border: var(--vscode-editor-background);
+}
+
+table td {
+    border: 1px solid var(--vscode-editor-foreground);
+    padding: 2px 4px;
+}
+
+table tr:nth-child(even) {
+    background: var(--vscode-editor-lineHighlightBackground);
 }
 
 blockquote {
-    color: white;
+    color: var(--vscode-editor-foreground);
     background-color: var(--vscode-editor-background);
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    padding-left: 15px;
+    border-left: 2px solid var(--vscode-editor-lineHighlightBackground);
 }
 
 .comment {

css/lmps_light.css

@@ -1,18 +1,44 @@
-body.vscode-light {
-    color: black;
+body {
+    text-align: justify;
 }
 
-body.vscode-dark {
-    color: white;
+table {
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
 }
 
-body.vscode-high-contrast {
-    color: white;
+svg {
+    color: var(--vscode-editor-foreground);
+}
+
+table {
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+}
+
+table th {
+    border: var(--vscode-editor-background);
+}
+
+table td {
+    border: 1px solid var(--vscode-editor-foreground);
+    padding: 2px 4px;
+}
+
+table tr:nth-child(even) {
+    background: var(--vscode-editor-lineHighlightBackground);
 }
 
 blockquote {
-    color: black;
+    color: var(--vscode-editor-foreground);
     background-color: var(--vscode-editor-background);
+    margin-top: 5px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    padding-left: 15px;
+    border-left: 2px solid var(--vscode-editor-lineHighlightBackground);
 }
 
 .comment {

src/doc_fcns.ts

@@ -248,7 +248,7 @@ export async function doc_completion_item(autoConf: WorkspaceConfiguration, comp
                     case "Extensive":
                         compl_it.documentation = mediumBlock(c, compl_it.documentation, syntax_id)
                         compl_it.documentation.appendMarkdown(" \n" + "--- " + " \n")
-                        compl_it.documentation.appendMarkdown(await getMathMarkdown(c.short_description, color))
+                        compl_it.documentation.appendMarkdown(await getMathMarkdown(c.short_description, color, true))
                         break;
                     default:
                         break;

src/doc_panel_fcns.ts

@@ -2,7 +2,6 @@ import { WebviewPanel, ExtensionContext, Uri, window, TextDocument, TextEditor,
 import { doc_entry, getColor, fix_img_path, getDocumentation } from './doc_fcns'
 import { getMathMarkdown } from './render_fcns'
 import { getRangeFromPosition } from './hover_fcns';
-
 import { join } from 'path'
 
 export interface DocPanel extends WebviewPanel {
@@ -63,7 +62,7 @@ function fix_base64_image_html(txt: string): string {
 }
 
 
-export async function set_doc_panel_content(panel: DocPanel | undefined, md_content: MarkdownString, context: ExtensionContext, md: { render: (arg0: string) => any; }) {
+export function set_doc_panel_content(panel: DocPanel | undefined, md_content: MarkdownString, context: ExtensionContext, md: { render: (arg0: string) => any; }) {
 
     if (panel) {
         const css_lmps: Uri[] = [
@@ -102,17 +101,17 @@ export async function create_doc_page(snippet: string, panel: WebviewPanel | und
         if (docs?.syntax) {
             content.appendMarkdown("### Syntax: \n")
             content.appendCodeblock(docs?.syntax.join('\n'), "lmps")
-            content.appendMarkdown(await getMathMarkdown(docs?.parameters, color) + "\n\n")
+            content.appendMarkdown(await getMathMarkdown(docs?.parameters, color, false) + "\n\n")
         }
         if (docs?.examples) {
             let exmpl: string = fix_img_path(docs?.examples, true, panel, context)
-            exmpl = await getMathMarkdown(exmpl, color)
+            exmpl = await getMathMarkdown(exmpl, color, false)
             content.appendMarkdown("### Examples: \n")
             content.appendMarkdown(exmpl + '\n')
         }
         if (docs?.description) {
             let full_desc: string = fix_img_path(docs.description, true, panel, context)
-            full_desc = await getMathMarkdown(full_desc, color)
+            full_desc = await getMathMarkdown(full_desc, color, false)
             content.appendMarkdown("### Description: \n")
             content.appendMarkdown(full_desc + "\n")
         }

src/highlight_fcns.ts

@@ -13,7 +13,7 @@ const on_wasm = oniguruma.loadWASM(wasm);
 /**
  * Read a json file and convert to plist as a promise
  */
-export function readJSON2plist(path: string): Promise<string> {
+function readJSON2plist(path: string): Promise<string> {
 	return new Promise<string>((resolve, reject) => {
 		readFile(path, (error, data) => {
 			if (error) {

src/hover_fcns.ts

@@ -19,24 +19,24 @@ export async function createHover(docs: doc_entry, context:ExtensionContext): Pr
             if (docs?.short_description) {
                 const show_doc_uri = Uri.parse(`command:extension.show_docs`);
                 let short_desc: string = fix_img_path(docs.short_description, false, undefined, context)
-                short_desc = await getMathMarkdown(short_desc, color)
+                short_desc = await getMathMarkdown(short_desc, color, true)
                 content.appendMarkdown(short_desc + `. [Read more... ]( ${show_doc_uri} ) \n`)
                 content.appendMarkdown("\n --- \n")
             }
             if (docs?.syntax) {
                 content.appendMarkdown("### Syntax: \n")
                 content.appendCodeblock(docs?.syntax.join('\n'), "lmps")
-                content.appendMarkdown(await getMathMarkdown(docs?.parameters, color) + "\n\n")
+                content.appendMarkdown(await getMathMarkdown(docs?.parameters, color, true) + "\n\n")
             }
             if (docs?.examples && hover_conf.Examples) {
                 let exmpl: string = fix_img_path(docs?.examples, true, undefined, context)
-                exmpl = await getMathMarkdown(exmpl, color)
+                exmpl = await getMathMarkdown(exmpl, color, true)
                 content.appendMarkdown("### Examples: \n")
                 content.appendMarkdown(exmpl + '\n')
             }
             if (docs?.description && hover_conf.Detail == 'Complete') {
                 let full_desc: string = fix_img_path(docs.description, true, undefined, context)
-                full_desc = await getMathMarkdown(full_desc, color)
+                full_desc = await getMathMarkdown(full_desc, color, true)
                 content.appendMarkdown("### Description: \n")
                 content.appendMarkdown(full_desc + "\n")
             }

src/render_fcns.ts

@@ -66,20 +66,24 @@ function svgToDataUrl(xml: string): string {
     return b64Start + svg64
 }
 
-async function typeset(arg: string, scale: number, color:string, format:string): Promise<string> {
+async function typeset(arg: string, scale: number, color:string, format:string, b_md:boolean): Promise<string> {
     const data = await mj.typeset({
         math: arg,
         format: format,
         svgNode: true
     })
-    scaleSVG(data, scale)
-    const xml = colorSVG(data.svgNode.outerHTML, color)
-    const md = svgToDataUrl(xml)
-    return `![image](${md})`
+    if (b_md) {
+        scaleSVG(data, scale) 
+        const xml = colorSVG(data.svgNode.outerHTML, color)
+        const md = svgToDataUrl(xml)
+        return `![equation](${md})`
+    } else {
+        return data.svgNode.outerHTML
+    }
 }
 
 
-export async function getMathMarkdown(txt: string, color:string): Promise<string> {
+export async function getMathMarkdown(txt: string, color:string, b_md:boolean): Promise<string> {
 
     let strOut: string = ""
     // RegExp to match block equations and split text into blocks of Text or Equations
@@ -88,15 +92,15 @@ export async function getMathMarkdown(txt: string, color:string): Promise<string
 
     for (let ix = 0; ix < txtSplit.length; ix++) {
         if (txtSplit[ix].search(eqPat) != -1) {
-            strOut += lf + await typeset(txtSplit[ix].replace(RegExp('\\\\(\\[|\\])', 'g'), ""), 1, color, "TeX") + lf
+            strOut += lf + await typeset(txtSplit[ix].replace(RegExp('\\\\(\\[|\\])', 'g'), ""), 1, color, "TeX", b_md) + lf
         } else {
             // Check for Inline Math in standard Text Block
             // RegExp to match Inline Equations and Symbols
             const inlinePat: RegExp = RegExp('(\\\\\\([\\r\\s\\S]*?\\\\\\))', 'g')
             const txtSubSplit = txtSplit[ix].split(inlinePat)
             for (let iz = 0; iz < txtSubSplit.length; iz++) {
                 if (txtSubSplit[iz].search(inlinePat) != -1) {
-                    strOut += await typeset(txtSubSplit[iz].replace(RegExp('\\\\(\\(|\\))', 'g'), ""), 0.75, color, "inline-TeX")
+                    strOut += await typeset(txtSubSplit[iz].replace(RegExp('\\\\(\\(|\\))', 'g'), ""), 0.75, color, "inline-TeX", b_md)
                 } else {
                     strOut += txtSubSplit[iz]
                 }