diff --git a/CHANGELOG.md b/CHANGELOG.md index 701d1e0..fad0589 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/css/lmps_dark.css b/css/lmps_dark.css index 32a0395..8edb410 100644 --- a/css/lmps_dark.css +++ b/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 { diff --git a/css/lmps_light.css b/css/lmps_light.css index 054db0a..a8e61ce 100644 --- a/css/lmps_light.css +++ b/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 { diff --git a/src/doc_fcns.ts b/src/doc_fcns.ts index 4f94119..c826f71 100644 --- a/src/doc_fcns.ts +++ b/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; diff --git a/src/doc_panel_fcns.ts b/src/doc_panel_fcns.ts index 827ace7..e1a8660 100644 --- a/src/doc_panel_fcns.ts +++ b/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") } diff --git a/src/highlight_fcns.ts b/src/highlight_fcns.ts index 998dace..d1d3c55 100644 --- a/src/highlight_fcns.ts +++ b/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 { +function readJSON2plist(path: string): Promise { return new Promise((resolve, reject) => { readFile(path, (error, data) => { if (error) { diff --git a/src/hover_fcns.ts b/src/hover_fcns.ts index 537a42e..d3c2b05 100644 --- a/src/hover_fcns.ts +++ b/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") } diff --git a/src/render_fcns.ts b/src/render_fcns.ts index e78af63..fe0ffa3 100644 --- a/src/render_fcns.ts +++ b/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 { +async function typeset(arg: string, scale: number, color:string, format:string, b_md:boolean): Promise { 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 { +export async function getMathMarkdown(txt: string, color:string, b_md:boolean): Promise { let strOut: string = "" // RegExp to match block equations and split text into blocks of Text or Equations @@ -88,7 +92,7 @@ export async function getMathMarkdown(txt: string, color:string): Promise