markdown测试

· · 个人记录

\checkmark

什么是 Markdown?

Markdown 是一种文本格式。你可以用它来控制文档的显示。使用 markdown，你可以创建粗体的文字，斜体的文字，添加图片，并且创建列表 等等。基本上来讲，Markdown 就是普通的文字加上 # 或者 * 等符号。

语法说明

标题

# 这是 <h1> 一级标题

## 这是 <h2> 二级标题

### 这是 <h3> 三级标题

#### 这是 <h4> 四级标题

##### 这是 <h5> 五级标题

###### 这是 <h6> 六级标题

如果你想要给你的标题添加 id 或者 class，请在标题最后添加 {#id .class1 .class2}。例如：

# 这个标题拥有 1 个 id {#my_id}

# 这个标题有 2 个 classes {.class1 .class2}

这是一个 MPE 扩展的特性。

强调

<!-- prettier-ignore -->

*这会是 斜体 的文字*
_这会是 斜体 的文字_

**这会是 粗体 的文字**
__这会是 粗体 的文字__

_你也 **组合** 这些符号_

~~这个文字将会被横线删除~~

列表

无序列表

- Item 1
- Item 2
  - Item 2a
  - Item 2b

有序列表

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

添加图片

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)

链接

https://github.com - 自动生成！
[GitHub](https://github.com)

引用

正如 Kanye West 所说：

> We're living the future so
> the present is our past.

分割线

如下，三个或者更多的

---

连字符

---

星号

---

下划线

行内代码

我觉得你应该在这里使用
`<addr>` 才对。

代码块

你可以在你的代码上面和下面添加 <code>```</code> 来表示代码块。

语法高亮

你可以给你的代码块添加任何一种语言的语法高亮

例如，给 ruby 代码添加语法高亮：

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

会得到下面的效果：

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

代码块 class（MPE 扩展的特性）

你可以给你的代码块设置 class。

例如，添加 class1 class2 到一个 代码块：

```javascript {.class1 .class}
function add(x, y) {
  return x + y
}
```
代码行数

如果你想要你的代码块显示代码行数，只要添加 line-numbers class 就可以了。

例如：

```javascript {.line-numbers}
function add(x, y) {
  return x + y
}
```

将会得到下面的显示效果：

高亮代码行数

你可以通过添加 highlight 属性的方式来高亮代码行数：

```javascript {highlight=10}

### 任务列表

```markdown
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

表格

<!-- prettier-ignore -->

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

扩展的语法

表格

需要在插件设置中打开 enableExtendedTableSyntax 选项来使其工作。

Emoji & Font-Awesome

只适用于 markdown-it parser 而不适用于 pandoc parser。
缺省下是启用的。你可以在插件设置里禁用此功能。

:smile:
:fa-car:

上标

30^th^

下标

H~2~O

脚注

Content [^1]

[^1]: Hi! This is a footnote

缩略

_[HTML]: Hyper Text Markup Language
_[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.

标记

==marked==

CriticMarkup

CriticMarkup 缺省是禁用的，你可以通过插件设置来启动它。
有关 CriticMarkup 的更多信息，请查看 CriticMarkup 用户指南.

这里有 5 种基本语法：

CriticMarkup 仅可用于 markdown-it parser，不与 pandoc parser 兼容。

参考

数学

Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。

KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。

默认下的分隔符：

你可以在 插件设置中 选择数学渲染引擎以及分隔符。

你也可以通过 <kbd>cmd-shift-p</kbd> 然后选择 Markdown Preview Enhanced: Open Mathjax config 命令来打开 Mathjax 配置文件。

图像

Markdown Preview Enhanced 内部支持 flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染。 你也可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。

Please note that some diagrams doesn't work well with file export like PDF, pandoc, etc.

Flow Charts

这一特性基于 flowchart.js。

Sequence Diagrams

这一特性基于 js-sequence-diagrams。

Mermaid

Markdown Preview Enhanced 使用 mermaid 来渲染流程图和时序图。

三个 mermaid 主题是支持的，并且你可以在 插件设置 中设置主题：

你还可以通过 Markdown Preview Enhanced: Open Mermaid Config 命令打开 mermaid 配置文件。

PlantUML

Markdown Preview Enhanced 使用 PlantUML 来创建各种图形。（Java 是需要先被安装好的）

如果代码中 @start... 没有被找到，那么 @startuml ... @enduml 将会被自动添加。

WaveDrom

Markdown Preview Enhanced 使用 WaveDrom 来渲染 digital timing diagram.

GraphViz

Markdown Preview Enhanced 使用 Viz.js 来渲染 dot 语言 图形。

Vega 和 Vega-lite

Markdown Preview Enhanced 支持 vega 以及 vega-lite 的静态图像.

你也可以 @import 一个 JSON 或者 YAML 文件作为 vega 图像，例如：

@import "your_vega_source.json" {as="vega"}
@import "your_vega_lite_source.json" {as="vega-lite"}

Ditaa

Markdown Preview Enhanced 支持 ditaa。

(Java 是需要先被安装好的)

ditaa 整合于 code chunk, for example:

<pre>

  +--------+   +-------+    +-------+
  |        | --+ ditaa +--> |       |
  |  Text  |   +-------+    |diagram|
  |Document|   |!magic!|    |       |
  |     {d}|   |       |    |       |
  +---+----+   +-------+    +-------+
      :                         ^
      |       Lots of work      |
      +-------------------------+

</pre>

<kbd>shift-enter</kbd> 来运行 code chunk。 设置 {hide=true} 来隐藏代码块。 设置 {run_on_save=true} 启动当文件保存时，渲染 ditaa 图像。

如果你只是想要显示代码块而不想画图，则只要在后面添加 {code_block=true} 即可：

```mermaid {code_block=true}
// 你的 mermaid 代码
```

你可以为图像的容器添加属性。 例如：

```puml {align="center"}
a->b
```

将会把 puml 的图像放在中间。

当你保存你的 markdown 文件到 GFM Markdown 时， 所有图像将会被保存为 png 文件到 imageFolderPath 文件夹。 你可以设置导出文件的文件名 {filename="图片.png"}。

例如：

```mermaid {filename="我的mermaid.png"}
...
```

目录列表（TOC）

Markdown Preview Enhanced 支持你在 markdown 文件中创建 TOC。 你可以通过 <kbd>cmd-shift-p</kbd> 然后选择 Markdown Preview Enhanced: Create Toc 命令来创建 TOC。 多个 TOCs 可以被创建。 如果你想要在你的 TOC 中排除一个标题，请在你的标题 后面 添加 {ignore=true} 即可。

TOC 将会在你的 markdown 文件保存时更新。 你需要保持预览打开才能更新 TOC。

设置

[TOC]

你也可以通过在你的 markdown 文件中输入 [TOC] 来创建 TOC。 例如：

[TOC]

# 标题 1

## 标题 2 {ignore=true}

标题 2 将会被目录忽略.

但是，这种方式创建的 TOC 只会在预览中显示，而不会修改你的 markdown 文件。

[TOC] 以及边栏 TOC 的设置

你可以通过编写 front-matter 来进行设置：

---
toc:
  depth_from: 1
  depth_to: 6
  ordered: false
---

导入外部文件

咋使呢？

仅仅

@import "你的文件"

就可以了，很简单对吧～ <code>d(`･∀･)b</code>

<!-- @import "your_file" --> 的写法也是支持的。

刷新按钮

刷新按钮可以在你的预览右上角找到。 点击它将会清空文件缓存并且刷新预览。 这个功能将会十分有用如果你想要清除图片缓存 #144 #249。

支持的文件类型

设置图片

@import "test.png" {width="300px" height="200px" title="图片的标题" alt="我的 alt"}

引用在线文件

例如：

@import "https://raw.githubusercontent.com/shd101wyy/markdown-preview-enhanced/master/LICENSE.md"

引用 PDF 文件

如果你要引用 PDF 文件，你需要事先安装好 pdf2svg。 Markdown Preview Enhanced 支持引用本地或者在线的 PDF 文件。 但是，引用大的 PDF 文件是不推荐的。

例如：

@import "test.pdf"

PDF 设置

强制渲染为代码块

@import "test.puml" {code_block=true class="line-numbers"}
@import "test.py" {class="line-numbers"}

As（作为）代码块

@import "test.json" {as="vega-lite"}

导入特定行数

@import "test.md" {line_begin=2}
@import "test.md" {line_begin=2 line_end=10}
@import "test.md" {line_end=-4}

引用文件作为 Code Chunk

@import "test.py" {cmd="python3"}

Code Chunk

未来可能会有变动

Markdown Preview Enhanced 支持渲染代码的运行结果。

```bash {cmd=true}
ls .
```

```javascript {cmd="node"}
const date = Date.now()
console.log(date.toString())
```

⚠️ 脚本运行默认是禁用的并且需要在 Atom 和 VSCode 的插件设置中开启来进行使用

请小心使用这一特性，因为它很有可能造成安全问题！ 当你的脚本运行设置是开启的，你的电脑很有可能被黑客攻击，如果有人使你运行了 Markdown 文档中的恶意代码。

设置名称： enableScriptExecution

命令 & 快捷键

格式

你可以通过以下形式来设置 code chunk：<code>```lang {cmd=your_cmd opt1=value1 opt2=value2 ...}</code>。

如果一个属性的值是 true，那么它可以被省略，（e.g. {cmd hide} 和 {cmd=true hide=true} 相同）。

lang 你想要代码所高亮的语言。 这个是要被放在最前面的。

基本设置

cmd 将要被运行的命令。 如果 cmd 没有被提供，那么 lang 将会被视作为命令。

例如：

    ```python {cmd="/usr/local/bin/python3"}
    print("这个将会运行 python3 程序")
    ```

output html, markdown, text, png, none

设置你想要如何显示你的代码结果。 html 将会添加输出结果为 html。 markdown 将会添加输出结果为 markdown。（MathJax 以及 graphs 在这种情况下是不被支持的） text 将会添加输出结果到 pre 块。 png 将会添加输出结果到 base64 图片。 none 将会隐藏输出结果。

例如：

```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))
```

args 需要被添加到命令的 args 。 例如：

```python {cmd=true args=["-v"]}
print("Verbose will be printed first")
```

```erd {cmd=true args=["-i", "$input_file", "-f", "svg"] output="html"}
# output svg format and append as html result.
```

stdin 如果 stdin 被设置为 true，那么代码将会被传递到 stdin 而不是作为文件。

hide hide 将会隐藏代码块但是会显示运行结果，默认为 false。 例如：

```python {hide=true}
print('you can see this output message, but not this code')
```

continue 如果设置 continue: true，那么这个 code chunk 将会继续运行上一个 code chunk 的内容。 如果设置continue: id，那么这个 code chunk 从拥有这个 id 的 code chunk 运行。 例如：

```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 如果设置 class="class1 class2"，那么 class1 class2 将会被添加到 code chunk。

element 你想要添加的元素。 请查看下面的 Plotly 例子。

run_on_save boolean 当 markdown 文件被保存时，自动运行 code chunk。默认 false。

modify_source boolean 插入 code chunk 的运行结果直接到 markdown 文件。默认 false。

id Code chunk 的 id。这个选项可以配合 continue 选项使用。

宏

Matplotlib

如果设置 matplotlib=true，那么你的 python code chunk 将会在你的预览中绘制图像。 例如：

```python {cmd=true matplotlib=true}
import matplotlib.pyplot as plt
plt.plot([1,2,3, 4])
plt.show() # show figure
```

LaTeX

Markdown Preview Enhanced 也支持 LaTeX 编译。 在使用这个特性之前，你需要先安装好 pdf2svg 以及 LaTeX engine。 然后你就可以很简单的利用 code chunk 编写 LaTeX 了：

```latex {cmd=true}
\documentclass{standalone}
\begin{document}
   Hello world!
\end{document}
```

LaTeX 输出设置

latex_zoom 如果设置了 latex_zoom=num，那么输出结果将会被缩放 num 倍。

latex_width 输出结果的宽度。

latex_height 输出结果的高度。

latex_engine 就会被用来编译 tex 文件的 latex 引擎。默认下 pdflatex 是被使用的。你可以在 插件设置 中改变它的默认值。

TikZ 例子

推荐使用 standalone 绘制 tikz 图形。

Plotly

Markdown Preview Enhanced 支持你轻松的绘制 Plotly 图形。 例如：

Demo

下面的例子展示了如何利用 erd 库绘制 ER diagram。

```erd {cmd=true output="html" args=["-i", "$input_file", "-f", "svg"]}

[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"]}

接着我们点击 运行按钮来运行我们的代码。

展示

bash

gnuplot with svg output

局限