Markdown 用户手册

本插件实现了在 Discuz 论坛解析 Markdown 格式文档。插件地址：https://addon.dismall.com/plugins/zxsq_markdown.html

注意事项

插件的核心功能是实现了一个 [md] 标签来解析 Markdown 文档。对一些增强功能，比如代码高亮，数学公式，图表等，本站均有独立插件，既可配合 Markdown 插件使用，也可以独立使用，您可以按需选择。下表是可以配合 Markdown 使用的插件。

功能描述	所需插件
超级图表，支持 Graphviz，Ditaa，思维导图等功能	zxsq_superplot
代码高亮	zxsq_code
数学公式	zxsq_mathjax
流程图甘特图	zxsq_mermaid
可视化编辑器	zxsq_editor

使用方法

编辑器工具按钮

点击编辑器工具栏的 按钮 (此功能需安装插件 zxsq_editor)，下拉列表中选择帖子类型，之后输入相应代码

直接输入代码

[md]put your markdown code here[ /md]   #实际写作时 [ /md] 没有空格

标题

atx 形式

# h1
## h2
### h3
#### h4
....

表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

效果如下：

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

超级图表

DiscuzX 超级图表 是一款能将特定语法文本显示为图表的插件，目前支持 Graphviz，Asymptote， 思维导图，Ditaa，Gnuplot，二维码，Message Sequence Chart，blockdiag，雷达图，图书封面等类型的图表。插件具有以下特点：

1. 论坛只存储图形描述语言的代码，图片通过远程接口生成并存储在远程服务器，不占用论坛空间
2. 支持图表类型取决于远程接口，新增功能时仅需要扩展远程接口，插件无需变动，扩展能力强
3. 提供可选的可视化编辑器（zxsq_editor），可按需安装

详情请访问 【超级图表】使用手册

在 Markdown 中用类似代码的语法使用超级图表功能，格式如下：

```plot:engine format
code
```

比如使用 ditaa 输出 png 图形：

```plot:ditaa png
+--+
|  |
+--+
```

效果：

+--+ |  | +--+

下面是一些演示。

Graphviz

digraph finite_state_machine {         rankdir=LR;         size="8,5"         node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;         node [shape = circle];         LR_0 -> LR_2 [ label = "SS(B)" ];         LR_0 -> LR_1 [ label = "SS(S)" ];         LR_1 -> LR_3 [ label = "S($end)" ];         LR_2 -> LR_6 [ label = "SS(b)" ];         LR_2 -> LR_5 [ label = "SS(a)" ];         LR_2 -> LR_4 [ label = "S(A)" ];         LR_5 -> LR_7 [ label = "S(b)" ];         LR_5 -> LR_5 [ label = "S(a)" ];         LR_6 -> LR_6 [ label = "S(b)" ];         LR_6 -> LR_5 [ label = "S(a)" ];         LR_7 -> LR_8 [ label = "S(b)" ];         LR_7 -> LR_5 [ label = "S(a)" ];         LR_8 -> LR_6 [ label = "S(b)" ];         LR_8 -> LR_5 [ label = "S(a)" ]; }

Ditaa

       +----------+ edit +----------+   input +----------+ compile +----------+        |  cPNK    |      |  cRED    |         |   cGRE   |         |  cPNK    |        | refined  |<-----+ h,cpp    +-------->+ compiler,+-------->+Executable|        |   h,cpp  |      |          |         | linker   |         |   File   |        | {s}      |      |  {io}    |         |          |         |    {s}   |        +----------+      +----+-----+         +----------+         +----------+                               | input                               v                          +----------+                          |  cGRE    |                          | doxygen  |                          |          |                          +----+-----+                               | process                               v                          +----------+                          |  cPNK    |                          | Doxgen   |                          | Document |                          |    {d}   |                          +----------+

消息图

msc { arcgradient = 20; a [label="Client",textbgcolor=yellow],b [label="Server",textbgcolor=orange]; a=>b [label="SYN=1,seq=j",arcskip=1,textcolor="red"]; a box a [label="SYN-SEND",textbgcolor=green]; |||; a<=b [label="SYN=1,ACK=1,seq=k,ack=j+1",arcskip=1,textcolor="red"]; b box b [label="SYN-RECV",textbgcolor=green]; |||; a=>b [label="ACK=1,seq=j+1,ack=k+1",arcskip=1,textcolor="red"]; a box a [label="ESTABLISHED",textbgcolor=green]; b box b [label="ESTABLISHED",textbgcolor=green]; }

Asymptote

import math; import graph; size(0,400); real f(real t) {return 2*cos(t);} pair F(real x) {return (x,f(x));} draw(polargraph(f,0,pi,operator ..)); defaultpen(fontsize(20pt)); xaxis("$x$"); yaxis("$y$"); real theta=radians(50); real r=f(theta); draw("$\theta$",arc((0,0),0.5,0,degrees(theta)),red,Arrow,PenMargins); pair z=polar(r,theta); draw(z--(z.x,0),dotted+red); draw((0,0)--(z.x,0),dotted+red); label("$r\cos\theta$",(0.5*z.x,0),0.5*S,red); label("$r\sin\theta$",(z.x,0.5*z.y),0.5*E,red); dot("$(x,y)$",z,N); draw("r",(0,0)--z,0.5*unit(z)*I,blue,Arrow,DotMargin); dot("$(a,0)$",(1,0),NE); dot("$(2a,0)$",(2,0),NE);

Mermaid

通过安装插件 zxsq_mermaid ，可以在 Markdown 中使用 Mermaid 支持流程图，时序图以及甘特图，语法如下

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

下面是一些演示。

时序图

sequenceDiagram     participant Alice     participant Bob     Alice->>John: Hello John, how are you?     loop Healthcheck         John->>John: Fight against hypochondria     end     Note right of John: Rational thoughts <br/>prevail...     John-->>Alice: Great!     John->>Bob: How about you?     Bob-->>John: Jolly good!

流程图

graph LR     start[开始] --> input[输入A,B,C]     input --> conditionA{A是否大于B}     conditionA -- YES --> conditionC{A是否大于C}     conditionA -- NO --> conditionB{B是否大于C}     conditionC -- YES --> printA[输出A]     conditionC -- NO --> printC[输出C]     conditionB -- YES --> printB[输出B]     conditionB -- NO --> printC[输出C]     printA --> stop[结束]     printC --> stop     printB --> stop

甘特图

gantt         dateFormat  YYYY-MM-DD         title Adding GANTT diagram functionality to mermaid         section A section         Completed task            :done,    des1, 2014-01-06,2014-01-08         Active task               :active,  des2, 2014-01-09, 3d         Future task               :         des3, after des2, 5d         Future task2               :         des4, after des3, 5d         section Critical tasks         Completed task in the critical line :crit, done, 2014-01-06,24h         Implement parser and jison          :crit, done, after des1, 2d         Create tests for parser             :crit, active, 3d         Future task in critical line        :crit, 5d         Create tests for renderer           :2d         Add to mermaid                      :1d

粗斜体

*斜体文本*    _斜体文本_
**粗体文本**    __粗体文本__
***粗斜体文本***    ___粗斜体文本___

斜体文本  斜体文本

粗体文本  粗体文本

粗斜体文本   粗斜体文本

链接

常用链接方法

文字链接 [链接名称](http://链接网址)

网址链接 <http://链接网址>

文字链接 链接名称

网址链接 http://链接网址

高级链接技巧

这个链接用 1 作为网址变量 [Google][1].
这个链接用 yahoo 作为网址变量 [Yahoo!][yahoo].
然后在文档的结尾为变量赋值（网址）

  [1]: http://www.google.com/
  [yahoo]: http://www.yahoo.com/

这个链接用 1 作为网址变量 Google.

这个链接用 yahoo 作为网址变量 Yahoo!.

然后在文档的结尾为变量赋值（网址）

列表

普通无序列表

- 列表文本前使用 [减号+空格]
+ 列表文本前使用 [加号+空格]
* 列表文本前使用 [星号+空格]

• 列表文本前使用 [减号+空格]
• 列表文本前使用 [加号+空格]
• 列表文本前使用 [星号+空格]

普通有序列表

1. 列表前使用 [数字+空格]
2. 我们会自动帮你添加数字
7. 不用担心数字不对，显示的时候我们会自动把这行的 7 纠正为 3

1. 列表前使用 [数字+空格]
2. 我们会自动帮你添加数字
3. 不用担心数字不对，显示的时候我们会自动把这行的 7 纠正为 3

列表嵌套

1. 列出所有元素：
    - 无序列表元素 A
        1. 元素 A 的有序子列表
    - 前面加四个空格
2. 列表里的多段换行：
    前面必须加四个空格，
    这样换行，整体的格式不会乱
3. 列表里引用：

    > 前面空一行  
    > 需要缩进，顶格将打断列表  
    > 换行需要加两个以上空格并回车

4. 列表里代码段：

    ```
    前面四个空格，之后按代码语法 ``` 书写
    ```

        或者直接八个空格，引入代码块

1. 列出所有元素：

   • 无序列表元素 A
     1. 元素 A 的有序子列表
   • 前面加四个空格

2. 列表里的多段换行：
   前面必须加四个空格，
   这样换行，整体的格式不会乱

3. 列表里引用：

   前面空一行
   需要缩进，顶格将打断列表
   换行需要加两个以上空格并回车

4. 列表里代码段：

   前面四个空格，之后按代码语法 ``` 书写

   或者直接八个空格，引入代码块

引用

普通引用

> 引用文本前使用 [大于号+空格]  
> 折行可以不加，新起一行都要加上哦

引用文本前使用 [大于号+空格]
折行可以不加，新起一行都要加上哦

引用里嵌套引用

> 最外层引用
>> 多一个 > 嵌套一层引用
>>> 可以嵌套很多层

最外层引用

多一个 > 嵌套一层引用

可以嵌套很多层

引用里嵌套列表

> - 这是引用里嵌套的一个列表
> - 还可以有子列表
>     * 子列表需要从 - 之后延后四个空格开始

• 这是引用里嵌套的一个列表
• 还可以有子列表
  • 子列表需要从 - 之后延后四个空格开始

引用里嵌套代码块

>     同样的，在前面加四个空格形成代码块
>  
> ```
> 或者使用 ``` 形成代码块
> ```

同样的，在前面加四个空格形成代码块

或者使用 ``` 形成代码块

图片

跟链接的方法区别在于前面加了个感叹号 !，这样是不是觉得好记多了呢？

![图片名称](http://图片网址)

当然，你也可以像网址那样对图片网址使用变量

这个链接用 1 作为网址变量  ![Google][1].  
然后在文档的结尾位变量赋值（网址）

 [1]: https://www.baidu.com/img/bdlogo.png

这个链接用 1 作为网址变量  

.  

然后在文档的结尾位变量赋值（网址）

换行

使用 GFM 语法，直接回车换行。

如果是要起一个新段落，只需要空出一行即可。

分隔符

如果你有写分割线的习惯，可以新起一行输入三个减号 -：

---

---

上面是分隔符

符号转义

如果你的描述中需要用到 markdown 的符号，比如 _ # * 等，但又不想它被转义，这时候可以在这些符号前加反斜杠，如 \_ \# \* 进行避免。

\_不想这里的文本变斜体、_
\*\*不想这里的文本被加粗、*\*

_不想这里的文本变斜体、_
**不想这里的文本被加粗、\

代码

行内代码

如果只想高亮正文中某个词，可以用两个反引号包裹起来

`行内代码`

这是行内代码

如果行内代码包含反引号，可以用多个反引号包裹

包含``反引号 (`) `` 的行内代码

输出：包含反引号 (`) 的行内代码

如果行内代码开头就有反引号，需要起始端和结束端各一个空格

`` `反引号` ``

输出：`反引号`

普通代码

反引号包裹

用 3 个或以上的反引号包裹起来

```
# rewrite`s rules for wordpress pretty url 
LoadModule rewrite_module  modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]
````

波浪线包裹

使用 3 个及以上的波浪线包裹代码

~~~
# rewrite`s rules for wordpress pretty url 
LoadModule rewrite_module  modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]
~~~~

缩进

4 个空格或者一个制表符

    # rewrite`s rules for wordpress pretty url 
    LoadModule rewrite_module  modules/mod_rewrite.so
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.php [NC,L]

显示效果

# rewrite`s rules for wordpress pretty url
LoadModule rewrite_module  modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]

特殊字符

当代码中有这些特殊字符时，可以缩进、波浪线、反引号嵌套使用，例如

    ~~~
    ```
    # rewrite`s rules for wordpress pretty url 
    LoadModule rewrite_module  modules/mod_rewrite.so
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.php [NC,L]
    ````
    ~~~~

输出效果如下：

~~~
```
# rewrite`s rules for wordpress pretty url 
LoadModule rewrite_module  modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]
````
~~~~

指定语言

用以下方式指定语言，当安装了 zxsq_code 插件 时将会显示高亮代码。

```javascript
$(document).ready(function () {
    alert('hello world');
});
```

效果：

$(document).ready(function () {
    alert('hello world');
});

数学公式

需要安装数学公式插件 zxsq_mathjax。

行内公式

$ax^2+bx+c=55$

效果如 $ax^2+bx+c=55$

跨行公式

$$A=\begin{pmatrix}
a_{11} & a_{12} & a_{13} \\
0 & a_{22} & a_{23} \\
0 & 0 & a_{33}
\end{pmatrix}$$

显示如下

$$A=\begin{pmatrix} a_{11} & a_{12} & a_{13} \\ 0 & a_{22} & a_{23} \\ 0 & 0 & a_{33} \end{pmatrix}$$

问题

支持公式之后，在一段中出现多个 $ 符号都会被当成公式，因此用到 $ 符号时，请用 行内代码语法，即 `$`。或者用三个反斜杠：\\\$，并配置数学公式插件，添加 processEscapes: true，示例如下：

MathJax.Hub.Config({
  tex2jax: {
    inlineMath: <a href="https://tecbbs.com/wiki/'$','$'], ['\\(','\\)'">'$','$'], ['\\(','\\)'</a>,
    processEscapes: true
  }
});

表示完全看不懂

断桥残雪 发表于 2015-7-11 13:06
表示完全看不懂

照着写写就懂了

$可以输入数学公式哦$

知行 发表于 2015-7-11 16:47
照着写写就懂了

$可以输入数学公式哦$

这个需要在哪里运行？

断桥残雪 发表于 2015-7-23 07:06
这个需要在哪里运行？

额，你没看上面写的么？

怎么下载这个插件?

你好   编辑的时候md不能用了[md]Error Please Check

```
phpinfo
```'[/md]

111

2222

33333

试试

<sda >