Merge pull request #9 from shd101wyy/0.1.3

0.1.3

README.md

@@ -58,9 +58,10 @@ TODO
 
 ## My Questions
 It would be great if you can answer my following questions to help develop this extension.  
-1. Is the a `onDidChangeScrollTop` function for `TextEditor` in vscode. So that I can track the change of scrollTop position of the text editor.  
+1. Is there a `onDidChangeScrollTop` function for `TextEditor` in vscode. So that I can track the change of scrollTop position of the text editor.  
 1. Can I manually set the `scrollTop` of `TextEditor`?
 1. How to programmatically close my preview by `uri`? I tried to implement the `Toggle Preview` command but failed because I don't know how to close a preview. So now only `Open Preview` is provided.  
+1. How do I programmatically close the a `Preview` by `vscode.Uri`?  
 
 ## Extension Settings
 

dependencies/prism/themes/coy.css

@@ -38,7 +38,10 @@ pre[class*="language-"] {
 	background-size: 3em 3em;
 	background-origin: content-box;
 	overflow: visible;
-	padding: 0;
+	/* padding: 0; */
+
+	padding-top: 1em;
+    padding-bottom: 1em;
 }
 
 code[class*="language"] {
@@ -194,19 +197,6 @@ pre[class*="language-"]:after {
 	color: #e0d7d1;
 }
 
-/* Plugin styles: Line Numbers */
-pre[class*="language-"].line-numbers {
-	padding-left: 0;
-}
-
-pre[class*="language-"].line-numbers code {
-	padding-left: 3.8em;
-}
-
-pre[class*="language-"].line-numbers .line-numbers-rows {
-	left: 0;
-}
-
 /* Plugin styles: Line Highlight */
 pre[class*="language-"][data-line] {
 	padding-top: 0;

docs/code-chunk.md

@@ -0,0 +1,221 @@
+# Code Chunk  
+
+(this doc is now the newest)
+
+**Changes might happen in the future.**  
+
+**Markdown Preview Enhanced** allows you to render code output into documents.     
+
+    ```bash {cmd:true}
+    ls .
+    ```
+
+    ```javascript {cmd:"node"}
+    const date = Date.now()
+    console.log(date.toString())
+    ```   
+
+## Commands & Keyboard Shortcuts
+* `Markdown Preview Enhanced: Run Code Chunk` or <kbd>shift-enter</kbd>      
+execute single code chunk where your cursor is at.    
+* `Markdown Preview Enhanced: Run All Code Chunks` or <kbd>ctrl-shift-enter</kbd>   
+execute all code chunks.    
+
+## Format
+You can configure code chunk options in format of <code>```lang {opt1:value1, opt2:value2, ...}</code>    
+
+**lang**  
+The grammar that the code block should highlight.  
+It should be put at the most front.  
+
+## Basic Options
+**cmd**    
+The command to run.  
+If `cmd` is not provided, then `lang` will be regarded as command.    
+
+eg:  
+
+		```python {cmd:"/usr/local/bin/python3"}
+		print("This will run python3 program")
+		```
+
+
+**output**  
+`html`, `markdown`, `text`, `png`, `none`  
+
+Defines how to render code output.   
+`html` will append output as html.    
+`markdown` will parse output as markdown. (MathJax and graphs will not be supported in this case, but KaTeX works)      
+`text` will append output to a `pre` block.    
+`png` will append output as `base64` image.  
+`none` will hide the output.  
+
+eg:     
+
+    ```gnuplot {cmd:true, output:"html"}
+    set terminal svg
+    set title "Simple Plots" font ",20"
+    set key left box
+    set samples 50
+    set style data points
+
+    plot [-10:10] sin(x),atan(x),cos(atan(x))
+    ```
+
+![screen shot 2017-06-20 at 8 40 07 am](https://user-images.githubusercontent.com/1908863/27336074-1cd3a88a-5594-11e7-857f-b8c598853433.png)
+
+**args**  
+args that append to command. eg:    
+
+    ```python {cmd:true, args:["-v"]}
+    print("Verbose will be printed first")
+    ```
+
+    ```erd {cmd:true, args:["-f", "svg", "-i"], output:"html"}
+		# output svg format and append as html result.
+    ```
+
+**stdin**  
+If `stdin` is set to true, then the code will be passed as stdin instead of as file.
+
+**hide**  
+`hide` will hide code chunk but only leave the output visible. default: `false`  
+eg:
+
+    ```python {hide:true}
+    print('you can see this output message, but not this code')
+    ```
+
+**continue**  
+If set `continue: true`, then this code chunk will continue from the last code chunk.  
+If set `continue: id`, then this code chunk will continue from the code chunk of id.  
+eg:    
+
+	```python {cmd:true, id:"izdlk700"}
+	x = 1
+	```
+
+	```python {cmd:true, id:"izdlkdim"}
+	x = 2
+	```
+
+	```python {cmd:true, continue:"izdlk700", id:"izdlkhso"}
+	print(x) # will print 1
+	```
+
+**class**  
+If set `class:"class1 class2"`, then `class1 class2` will be add to the code chunk.  
+* `lineNo` class will show line numbers to code chunk.
+
+**element**  
+The element that you want to append after.  
+Check the **Plotly** example below.
+
+**id**  
+The `id` of the code chunk. This option would be useful if `continue` is used.     
+
+## Macro
+* **input_file**  
+`input_file` is automatically generated under the same directory of your markdown file and will be deleted after running code that is copied to `input_file`.      
+By default, it is appended at the very end of program arguments.  
+However, you can set the position of `input_file` in your `args` option by `{input_file}` macro. eg:  
+
+
+    ```program {cmd:true, args:["-i", "{input_file}", "-o", "./output.png"]}
+    ...your code here
+    ```
+
+
+## Matplotlib  
+If set `matplotlib: true`, then the python code chunk will plot graphs inline in the preview.    
+eg:    
+
+	```python {cmd:true, matplotlib:true}
+	import matplotlib.pyplot as plt
+	plt.plot([1,2,3, 4])
+	plt.show() # show figure
+	```
+![screen shot 2017-06-20 at 8 44 25 am](https://user-images.githubusercontent.com/1908863/27336286-acc41d8a-5594-11e7-9a10-ed7a6fc41f6c.png)
+
+## LaTeX
+Markdown Preview Enhanced also supports `LaTeX` compilation.  
+Before using this feature, you need to have [pdf2svg](extra.md?id=install-svg2pdf) and [LaTeX engine](extra.md?id=install-latex-distribution) installed.  
+Then you can simply write LaTeX in code chunk like this:  
+
+
+    ```latex {cmd:true}
+    \documentclass{standalone}
+    \begin{document}
+       Hello world!
+    \end{document}
+    ```
+
+![screen shot 2017-06-20 at 8 45 15 am](https://user-images.githubusercontent.com/1908863/27336322-caba8658-5594-11e7-87cf-e54518d46435.png)
+
+
+### LaTeX output configuration  
+**latex_zoom**  
+If set `latex_zoom:num`, then the result will be scaled `num` times.  
+
+**latex_width**  
+The width of result.  
+
+**latex_height**  
+The height of result.  
+
+**latex_engine**  
+The latex engine that you used to compile `tex` file. By default `pdflatex` is used. You can change the default value from the [pacakge settings](usages.md?id=package-settings).    
+
+
+### TikZ example  
+It is recommended to use `standalone` while drawing `tikz` graphs.  
+![screen shot 2017-06-05 at 9 48 10 pm](https://cloud.githubusercontent.com/assets/1908863/26811633/b018aa76-4a38-11e7-9ec2-688f273468bb.png)
+
+
+## Plotly
+Markdown Preview Enhanced allows you to draw [Plotly](https://plot.ly/) easily.  
+For example:  
+![screen shot 2017-06-06 at 3 27 28 pm](https://user-images.githubusercontent.com/1908863/26850341-c6095a94-4acc-11e7-83b4-7fdb4eb8b1d8.png)
+
+* The first line `@import "https://cdn.plot.ly/plotly-latest.min.js" ` uses the [file import](file-imports.md) functionality to import `plotly-latest.min.js` file. However, it is recommended to download the js file to local disk for better performance.  
+* Then we created a `javascript` code chunk.
+
+## Demo
+This demo shows you how to render entity-relation diagram by using [erd](https://github.com/BurntSushi/erd) library.   
+
+    ```erd {cmd:true, output:"html", args:["-i", "{input_file}", "-f", "svg"], id:"ithhv4z4"}
+
+    [Person]
+    *name
+    height
+    weight
+    +birth_location_id
+
+    [Location]
+    *id
+    city
+    state
+    country
+
+    Person *--1 Location
+    ```
+
+`erd {cmd:true, output:"html", args:["-i", "{input_file}", "-f", "svg"]}`  
+* `erd` the program that we are using. (*you need to have the program installed first*)  
+* `output:"html"` we will append the running result as `html`.  
+* `args` field shows the arguments that we will use.  
+
+Then we can click the `run` button at the preview to run our code.  
+
+![code_chunk](http://i.imgur.com/a7LkJYD.gif)
+
+## Showcases (outdated)
+**bash**  
+![Screen Shot 2016-09-24 at 1.41.06 AM](http://i.imgur.com/v5Y7juh.png)
+
+**gnuplot with svg output**    
+![Screen Shot 2016-09-24 at 1.44.14 AM](http://i.imgur.com/S93g7Tk.png)
+
+## Limitations
+* Doesn't work with `ebook` yet.  
+* Might be buggy when using`pandoc document export`

package.json

@@ -40,6 +40,38 @@
             {
                 "command": "markdown-preview-enhanced.runCodeChunk",
                 "title": "Markdown Preview Enhanced: Run Code Chunk"
+            },
+            {
+                "command": "markdown-preview-enhanced.customizeCss",
+                "title": "Markdown Preview Enhanced: Customize CSS"
+            },
+            {
+                "command": "markdown-preview-enhanced.insertNewSlide",
+                "title": "Markdown Preview Enhanced: Insert New Slide"
+            },
+            {
+                "command": "markdown-preview-enhanced.insertTable",
+                "title": "Markdown Preview Enhanced: Insert Table"
+            },
+            {
+                "command": "markdown-preview-enhanced.insertPagebreak",
+                "title": "Markdown Preview Enhanced: Insert Page Break"
+            },
+            {
+                "command": "markdown-preview-enhanced.createTOC",
+                "title": "Markdown Preview Enhanced: Create TOC"
+            },
+            {
+                "command": "markdown-preview-enhanced.openMermaidConfig",
+                "title": "Markdown Preview Enhanced: Open Mermaid Config"
+            },
+            {
+                "command": "markdown-preview-enhanced.openMathJaxConfig",
+                "title": "Markdown Preview Enhanced: Open MathJax Config"
+            },
+            {
+                "command": "markdown-preview-enhanced.showUploadedImages",
+                "title": "Markdown Preview Enhanced: Show Uploaded Images"
             }
         ],
         "keybindings": [

src/code-chunk.ts

@@ -1,8 +1,44 @@
 import * as path from "path"
 import * as fs from "fs"
 import {spawn} from "child_process"
+import * as vm from "vm"
 
 import * as utility from "./utility"
+import * as LaTeX from "./latex"
+
+async function compileLaTeX(content:string, fileDirectoryPath:string, options:object):Promise<string> {
+  const latexEngine = options['latex_engine'] || 'pdflatex'
+  const latexSVGDir = options['latex_svg_dir'] // if not provided, the svg files will be stored in temp folder and will be deleted automatically
+  const latexZoom = options['latex_zoom']
+  const latexWidth = options['latex_width']
+  const latexHeight = options['latex_height']
+
+  const texFilePath = path.resolve(fileDirectoryPath, Math.random().toString(36).substr(2, 9) + '_code_chunk.tex')
+
+  await utility.writeFile(texFilePath, content)
+
+  try {
+    const svgMarkdown = await LaTeX.toSVGMarkdown(texFilePath, {latexEngine, markdownDirectoryPath:fileDirectoryPath, svgDirectoryPath:latexSVGDir, svgZoom:latexZoom, svgWidth:latexWidth, svgHeight:latexHeight})
+    fs.unlink(texFilePath, (error)=> {})
+
+    options['output'] = 'markdown' // set output as markdown
+    return svgMarkdown
+  } catch(e) {
+    fs.unlink(texFilePath, (error)=> {})
+    throw e
+  }
+}
+
+/**
+ * 
+ * @param code should be a javascript function string
+ * @param options 
+ */
+async function runInVm(code:string, options:object):Promise<string> {
+  const script = new vm.Script(`((${code})())`)
+  const context = vm.createContext( options['context'] || {})
+  return script.runInContext(context)
+}
 
 export async function run(content:string, fileDirectoryPath:string, options:object):Promise<string> {
   const cmd = options['cmd']
@@ -14,6 +50,14 @@ export async function run(content:string, fileDirectoryPath:string, options:obje
   const savePath = path.resolve(fileDirectoryPath, Math.random().toString(36).substr(2, 9) + '_code_chunk')
   content = content.replace(/\u00A0/g, ' ')
 
+  if (cmd.match(/(la)?tex/) || cmd === 'pdflatex') {
+    return compileLaTeX(content, fileDirectoryPath, options)
+  }
+
+  if (cmd === 'node.vm') {
+    return runInVm(content, options)
+  }
+
 
   if (cmd.match(/python/) && (options['matplotlib'] || options['mpl'])) {
     content = `

src/config.ts

@@ -1,6 +1,6 @@
 import * as vscode from "vscode"
 
-export class MarkdownPreviewEnhancedConfig implements MPEConfig {
+export class MarkdownPreviewEnhancedConfig implements MarkdownEngineConfig {
   public static getCurrentConfig() {
     return new MarkdownPreviewEnhancedConfig()
   }