VScode插件Markdown Preview Enhance
Code Chunk功能简介
VS code里面有一个很有用的插件, 叫Markdown Preview Enhanced (MPE). 可以很好地支持Jupyter, 比默认的Markdown Preview要强大. 其中一个很特色的功能叫Code Chunk, 就是能够支持执行代码块内的代码! 例如以下代码将显示ls的结果和node的结果:
```bash {cmd=true}
ls .
```
```javascript {cmd="node"}
const date = Date.now()
console.log(date.toString())
```
在Preview 内点击"三角"开始的符号, 将在下方显示结果:
代码Preview和执行结果
Code Chunk的使用可以帮助VS Code或Atom成为一个可以显示图片结果的强大的IDE!
脚本运行默认是
禁用的并且需要在 Atom 和 VSCode 的插件设置中开启来进行使用. 请小心使用这一特性，因为它很有可能造成安全问题！ 当你的脚本运行设置是开启的，你的电脑很有可能被黑客攻击，如果有人使你运行了 Markdown 文档中的恶意代码。
在VS code的设置里设置名称：Enable Script Execution为勾选就可以了.
代码块标记
使用Code Chunk功能的代码块必须要使用额外形式做记认. 最基本的是{cmd=true}开启功能.
基本形式是```lang {cmd=your_cmd opt1=value1 opt2=value2 ...}:
-
lang是代码高亮的语言名, 排在最前面. -
cmd是执行代码块的命令, 可以设置为具体命令, 如cmd="/usr/local/bin/python3".
- 当设置为
{cmd=true}(或简写成{cmd})时, 将执行前面lang作为主命令.- 如果一个属性的值是
true，那么它可以被省略，（e.g.{cmd hide}和{cmd=true hide=true}相同）。- 如果命令需要参数, 使用额外选项
argv=["-f", "svg"]来指定.
-
opt1=value1是额外的选项.-
output:html,markdown,text,png,none. 设置如何显示结果.-
text是默认, 将添加输出结果到一个pre块中显示. -
none是隐藏结果. -
html是将添加输出结果为html (直接显示, 不在pre块内) -
markdown是将输出结果为markdown, 可能会显示不正常. -
png将会添加输出结果到base64图片 (实际不显示?)
-
-
args: 常用参数, 可以将列表里的选项传递给cmd.
"$input_file"是一个特殊的参数. 默认下, 会拷贝code chunk代码在Markdown文件所在目录下一个临时文件(运行后会删除), 这个文件会作为程序运行的最后一个参数传递给cmd命令. 如果想改变该文件的传入位置, 可以用"$input_file"在args中设置, 如program {cmd=true args=["-i", "$input_file", "-o", "./output.png"]}.-
hide: 设置为true, 会隐藏代码而只显示结果. 默认false -
stdin: 设置为true会将代码传递到stdin而不是作为文件传入. -
id: 可以手动给该code chunk设置一个id号, 可以被后面continue所调用 -
continue: 设置为true会继续运行上一个code chunk的内容, 如果设置为continue="id号", 则可以运行指定id的code chunk的内容. (continue其实就是合并多个code chunk来生成文件来运行). -
class: 如果设置class="class1 class2"，那么class1 class2将会被添加到 code chunk代码块所在HTML元素中。默认下该代码块class为language-语言名(便于语法着色).
class="line-numbers"将会添加代码行数到 code chunk (即代码前显示行号)。-
element: 设置想要添加的元素. 例如element="<div id='tester'></div>". 有时可以用于在页面加入元素并控制该元素作为显示. -
run_on_save: 设置为true时, 当 markdown 文件被保存时，自动运行 code chunk。默认false。 -
modify_source: 设置为true时, 插入 code chunk 的运行结果直接到 markdown 文件。默认false。 -
matplotlib: 设置为true时,pythoncode chunk 将会在你的预览中绘制图像。
-
```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))
```
cmd和output的控制
```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
```
```python {cmd=true matplotlib=true}
import matplotlib.pyplot as plt
plt.plot([1,2,3,4])
plt.show() # show figure
```
使用
-
Cmd+K, V打开MPE预览. (V放开cmd再按, 该快捷键会覆盖原预览的快捷键.) - 如之前的图示, 使用
MPE的Preview后直接按右上角的播放▶️按钮. -
Markdown Preview Enhanced: Run Code Chunk或者Shift-Enter运行你现在光标所在的一个 code chunk。 -
Markdown Preview Enhanced: Run All Code Chunks或者Ctrl-Shift-Enter运行所有的 code chunks。
实际上, Python的运行块代码也是
Shift+Enter, 但是 MPE 的快捷键仅针对Markdown文件进行执行, 而前者则是针对Python文件进行执行, 所以并不冲突.
Latex编译
- 首先, 要安装好 pdf2svg 以及LaTex Engine, 之后就可以很简单地使用code chunk编写LaTex.
-
latex_zoom 如果设置了
latex_zoom=num，那么输出结果将会被缩放num倍。 - latex_width 输出结果的宽度。
- latex_height 输出结果的高度。
-
latex_engine 就会被用来编译
tex文件的 latex 引擎。默认下pdflatex是被使用的。你可以在 插件设置 中改变它的默认值。
```latex {cmd=true}
\documentclass{standalone}
\begin{document}
Hello world!
\end{document}
```
