From ec292ea9afc09a08e2d8e158559561837bde0ffc Mon Sep 17 00:00:00 2001 From: Yiyi Wang Date: Tue, 20 Jun 2017 10:31:11 -0500 Subject: [PATCH] Update docs. --- README.md | 28 +++++++++++++++++++++--- docs/code-chunk.md | 6 +++++ src/markdown-engine.ts | 10 +++++++-- src/markdown-preview-enhanced-view.ts | 8 ++++--- src/markdown-preview-enhanced-webview.ts | 12 ++++++++-- 5 files changed, 54 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 905ae70..80a7b21 100644 --- a/README.md +++ b/README.md @@ -9,21 +9,43 @@ Below is a demo of the Atom version. ![](https://user-images.githubusercontent.com/1908863/26898176-a5cad7fc-4b90-11e7-9d8c-74f85f28f133.gif) ## Features - -Right now only 50% done: * ctrl-shift-m for `Markdown Preview Enhanced: Open Preview` command. * ctrl-shift-i for `Markdown Preview Enhanced: Image Helper` command. * Support uploading images to either `imgur` or `sm.ms`. ![Screen Shot 2017-06-15 at 1.31.01 AM](https://ooo.0o0.ooo/2017/06/15/59422aa748341.png) * shift-enter for `Markdown Preview Enhanced: Run Code Chunk` command. * ctrl-shift-enter for `Markdown Preview Enhanced: Run All Code Chunks` command. +* `Markdown Preview Enhanced: Customize CSS` +* `Markdown Preview Enhanced: Create TOC` +* `Markdown Preview Enhanced: Open Mermaid Config` +* `Markdown Preview Enhanced: Open MathJax Config` +* `Markdown Preview Enhanced: Insert New Slide` +* `Markdown Preview Enhanced: Insert Table` +* `Markdown Preview Enhanced: Insert Page Break` + + +* **Right Click** at the Preview to see the contextmenu -* **Right Click** at the Preview to see the contextmenu ![Screen Shot 2017-06-15 at 1.36.32 AM](https://ooo.0o0.ooo/2017/06/15/59422b1ab3931.png) For more features that will be supported in the future, check [Markdown Preview Enhanced for atom](https://shd101wyy.github.io/markdown-preview-enhanced/#/). ### Progress so far +#### June 20, 2017 +Basically finished. +* Done [Pandoc export](https://shd101wyy.github.io/markdown-preview-enhanced/#/pandoc-pdf). (Not tested). +* Done Markdown(GFM) export. (Not tested) +* Done [TOC](https://shd101wyy.github.io/markdown-preview-enhanced/#/toc) implementation. + > The vscode version is newer than the atom version. + > To ignore a heading from TOC, you need to set `{ignore: true}`. + > To add class and id, you need to set `{id:"...", class:"..."}`. +* Done Code Chunk implementation. Added two more options `modify_source` and `run_on_save`. Please check [this doc](./docs/code-chunk.md) for more information. +* Done [Customize CSS](https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css) support. +* Done `mermaid` configuration supoort. +* Done `MathJax` configuration support. +* Done `line-numbers`. Simply add `line-numbers` to code block(chunk) `class`. +![Screen Shot 2017-06-20 at 9.46.12 AM](https://ooo.0o0.ooo/2017/06/20/594939ec162d9.png) + #### June 16, 2017 * Done supporting [eBook export](https://shd101wyy.github.io/markdown-preview-enhanced/#/ebook). * [@import](https://shd101wyy.github.io/markdown-preview-enhanced/#/file-imports) 70% done. Now support importing every external files except `.js` and `.pdf` files. diff --git a/docs/code-chunk.md b/docs/code-chunk.md index 9adde1f..1788041 100644 --- a/docs/code-chunk.md +++ b/docs/code-chunk.md @@ -111,6 +111,12 @@ If set `class:"class1 class2"`, then `class1 class2` will be add to the code chu The element that you want to append after. Check the **Plotly** example below. +**run_on_save** `boolean` +Run code chunk when the markdown file is saved. Default `false`. + +**modify_source** `boolean` +Insert code chunk output directly into markdown source file. Default `false`. + **id** The `id` of the code chunk. This option would be useful if `continue` is used. diff --git a/src/markdown-engine.ts b/src/markdown-engine.ts index 7021013..39e71e1 100644 --- a/src/markdown-engine.ts +++ b/src/markdown-engine.ts @@ -559,7 +559,10 @@ export class MarkdownEngine { ${presentationScript} - + ${html} @@ -867,7 +870,10 @@ export class MarkdownEngine { ${title} - + ${mathStyle} diff --git a/src/markdown-preview-enhanced-view.ts b/src/markdown-preview-enhanced-view.ts index 0cb2af6..870a5cd 100644 --- a/src/markdown-preview-enhanced-view.ts +++ b/src/markdown-preview-enhanced-view.ts @@ -394,7 +394,7 @@ export class MarkdownPreviewEnhancedView implements vscode.TextDocumentContentPr }) engine.parseMD(text, {isForPreview: true, useRelativeFilePath: false, hideFrontMatter: false, triggeredBySave}) - .then(({markdown, html, tocHTML, JSAndCssFiles})=> { + .then(({markdown, html, tocHTML, JSAndCssFiles, yamlConfig})=> { // check JSAndCssFiles if (JSON.stringify(JSAndCssFiles) !== JSON.stringify(this.jsAndCssFilesMaps[sourceUri.fsPath])) { @@ -410,8 +410,10 @@ export class MarkdownPreviewEnhancedView implements vscode.TextDocumentContentPr html: html, tocHTML: tocHTML, totalLineCount: document.lineCount, - sourceUri: sourceUri.toString() - }) + sourceUri: sourceUri.toString(), + id: yamlConfig.id || '', + class: yamlConfig.class || '' + }) } }) }) diff --git a/src/markdown-preview-enhanced-webview.ts b/src/markdown-preview-enhanced-webview.ts index b35d1de..9b35473 100644 --- a/src/markdown-preview-enhanced-webview.ts +++ b/src/markdown-preview-enhanced-webview.ts @@ -692,7 +692,7 @@ function bindTagAClickEvent() { * update previewElement innerHTML content * @param html */ -function updateHTML(html) { +function updateHTML(html:string, id:string, classes:string) { // editorScrollDelay = Date.now() + 500 mpe.previewScrollDelay = Date.now() + 500 @@ -718,11 +718,19 @@ function updateHTML(html) { mpe.scrollMap = null bindTagAClickEvent() + + // set id and classes + mpe.previewElement.id = id || '' + mpe.previewElement.setAttribute('class', `markdown-preview-enhanced ${classes}`) // scroll to initial position if (!mpe.doneLoadingPreview) { mpe.doneLoadingPreview = true scrollToRevealSourceLine(config['initialLine']) + + // clear @scrollMap after 2 seconds because sometimes + // loading images will change scrollHeight. + setTimeout(()=> mpe.scrollMap = null, 2000) } else { // restore scrollTop mpe.previewElement.scrollTop = scrollTop // <= This line is necessary... } @@ -1000,7 +1008,7 @@ window.addEventListener('message', (event)=> { mpe.sidebarTOCHTML = data.tocHTML sourceUri = data.sourceUri renderSidebarTOC() - updateHTML(data.html) + updateHTML(data.html, data.id, data.class) } else if (data.type === 'change-text-editor-selection') { const line = parseInt(data.line) scrollToRevealSourceLine(line)