Update docs.

shd101wyy · Jun 20, 2017 · ec292ea · ec292ea
1 parent c2f98bf
commit ec292ea
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 10 deletions.
diff --git 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:   
 * <kbd>ctrl-shift-m</kbd> for `Markdown Preview Enhanced: Open Preview` command.  
 * <kbd>ctrl-shift-i</kbd> 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)  
 * <kbd>shift-enter</kbd> for `Markdown Preview Enhanced: Run Code Chunk` command.  
 * <kbd>ctrl-shift-enter</kbd> 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
@@ -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
@@ -559,7 +559,10 @@ export class MarkdownEngine {
 
       ${presentationScript}
 
-      <style> ${styleCSS}${globalStyles} </style>
+      <style> 
+      ${styleCSS} 
+      ${globalStyles} 
+      </style>
     </head>
     <body class="markdown-preview-enhanced ${princeClass} ${elementClass}" ${yamlConfig["isPresentationMode"] ? 'data-presentation-mode' : ''} ${elementId ? `id="${elementId}"` : ''}>
     ${html}
@@ -867,7 +870,10 @@ export class MarkdownEngine {
     <title>${title}</title>
     <meta charset=\"utf-8\">
     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
-    <style> ${styleCSS} ${globalStyles} </style>
+    <style> 
+    ${styleCSS} 
+    ${globalStyles} 
+    </style>
     ${mathStyle}
   </head>
   <body class="markdown-preview-enhanced">

diff --git 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
@@ -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)