【帮助文档】Post expand tools编辑器使用手册
# Markdown使用说明论坛通过插件实现了在Discuz论坛解析markdown格式文档。
## 使用方法
点击编辑器“Exp”按钮，输入代码
~~~
put your markdown code here[ /md] #实际写作时 [ /md]没有空格
~~~~
# 标题
(http://www.aaronsw.com/2002/atx/) 形式
```markdown
# h1
## h2
### h3
#### h4
##### h5
###### h6
....
`````
# h1
## h2
### h3
#### h4
##### h5
###### h6
....
类 (http://docutils.sourceforge.net/mirror/setext.html) 形式
```markdown
h1
========
h2
------------
```````
h1
========
h2
------------
# 表格
```
| 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 |
# 粗斜体
```
*斜体文本* _斜体文本_
**粗体文本** __粗体文本__
***粗斜体文本*** ___粗斜体文本___
`````
*斜体文本*_斜体文本_
**粗体文本**__粗体文本__
***粗斜体文本*** ___粗斜体文本___
# 链接
## 常用链接方法
```
文字链接 [链接名称](http://链接网址)
网址链接 <http://链接网址>
`````
文字链接 [链接名称](http://链接网址)
网址链接 <http://链接网址>
## 高级链接技巧
```
这个链接用 1 作为网址变量 .
这个链接用 yahoo 作为网址变量 .
然后在文档的结尾为变量赋值（网址）
: http://www.google.com/
: http://www.yahoo.com/
````
这个链接用 1 作为网址变量 .
这个链接用 yahoo 作为网址变量 .
然后在文档的结尾为变量赋值（网址）
: http://www.google.com/
: http://www.yahoo.com/
# 列表
## 普通无序列表
```
- 列表文本前使用 [减号+空格]
+ 列表文本前使用 [加号+空格]
* 列表文本前使用 [星号+空格]
````
- 列表文本前使用 [减号+空格]
+ 列表文本前使用 [加号+空格]
* 列表文本前使用 [星号+空格]
## 普通有序列表
```
1. 列表前使用 [数字+空格]
2. 我们会自动帮你添加数字
7. 不用担心数字不对，显示的时候我们会自动把这行的 7 纠正为 3
`````
1. 列表前使用 [数字+空格]
2. 我们会自动帮你添加数字
7. 不用担心数字不对，显示的时候我们会自动把这行的 7 纠正为 3
## 列表嵌套
~~~
1. 列出所有元素：
- 无序列表元素 A
1. 元素 A 的有序子列表
- 前面加四个空格
2. 列表里的多段换行：
前面必须加四个空格，
这样换行，整体的格式不会乱
3. 列表里引用：
> 前面空一行
> 需要缩进，顶格将打断列表
> 换行需要加两个以上空格并回车
4. 列表里代码段：
```
前面四个空格，之后按代码语法 ``` 书写
```
或者直接八个空格，引入代码块
~~~~~
1. 列出所有元素：
- 无序列表元素 A
1. 元素 A 的有序子列表
- 前面加四个空格
2. 列表里的多段换行：
前面必须加四个空格，
这样换行，整体的格式不会乱
3. 列表里引用：
> 前面空一行
> 需要缩进，顶格将打断列表
> 换行需要加两个以上空格并回车
4. 列表里代码段：
```
前面四个空格，之后按代码语法 ``` 书写
```
或者直接八个空格，引入代码块
# 引用
## 普通引用
```
> 引用文本前使用 [大于号+空格]
> 折行可以不加，新起一行都要加上哦
```
> 引用文本前使用 [大于号+空格]
> 折行可以不加，新起一行都要加上哦
## 引用里嵌套引用
```
> 最外层引用
>> 多一个 > 嵌套一层引用
>>> 可以嵌套很多层
````
> 最外层引用
>> 多一个 > 嵌套一层引用
>>> 可以嵌套很多层
## 引用里嵌套列表
```
> - 这是引用里嵌套的一个列表
> - 还可以有子列表
> * 子列表需要从 - 之后延后四个空格开始
`````
> - 这是引用里嵌套的一个列表
> - 还可以有子列表
> * 子列表需要从 - 之后延后四个空格开始
## 引用里嵌套代码块
~~~~
> 同样的，在前面加四个空格形成代码块
>
> ```
> 或者使用 ``` 形成代码块
> ```
~~~~~~~~
> 同样的，在前面加四个空格形成代码块
>
> ```
> 或者使用 ``` 形成代码块
> ```
# 图片
跟链接的方法区别在于前面加了个感叹号 !，这样是不是觉得好记多了呢？
```
````
当然，你也可以像网址那样对图片网址使用变量
```
这个链接用 1 作为网址变量!.
然后在文档的结尾位变量赋值（网址）
: https://www.baidu.com/img/bdlogo.png
`````
这个链接用 1 作为网址变量
!.
然后在文档的结尾位变量赋值（网址）
: https://www.baidu.com/img/bdlogo.png
# 换行
如果另起一行，只需在当前行结尾加 2 个空格
在当前行的结尾加 2 个空格
这行就会新起一行
如果是要起一个新段落，只需要空出一行即可。
# 分隔符
如果你有写分割线的习惯，可以新起一行输入三个减号 -：
```
---
```
---
上面是分隔符
# 符号转义
如果你的描述中需要用到 markdown 的符号，比如 `_ # *` 等，但又不想它被转义，这时候可以在这些符号前加反斜杠，如 `\_ \# \*` 进行避免。
```
\_不想这里的文本变斜体\_
\*\*不想这里的文本被加粗\*\*
````
\_不想这里的文本变斜体\_
\*\*不想这里的文本被加粗\*\*
# 代码
## 行内代码
如果只想高亮正文中某个词，可以用两个反引号包裹起来
```
`行内代码`
```
这是`行内代码`
如果行内代码包含反引号，可以用多个反引号包裹
```
包含``反引号(`) `` 的行内代码
```
输出：包含``反引号(`)`` 的行内代码
如果行内代码开头就有反引号，需要起始端和结束端各一个空格
```
`` `反引号` ``
```
输出：`` `反引号` ``
## 普通代码
### 反引号包裹
用3个或以上的反引号包裹起来
~~~~~~~~~
```
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_modulemodules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
````
~~~~~~~~~~
### 波浪线包裹
使用3个及以上的波浪线包裹代码
`````
~~~
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_modulemodules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
~~~~
``````
### 缩进
4个空格或者一个制表符
```
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_modulemodules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
````
显示效果
```
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_modulemodules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
````
### 特殊字符
当代码中有这些特殊字符时，可以缩进、波浪线、反引号嵌套使用，例如
~~~
```
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_modulemodules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
````
~~~~
输出效果如下：
~~~
```
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_modulemodules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
````
~~~~
## 指定语言
用以下方式指定语言，当有代码高亮解析器的时候将起作用
~~~~
```javascript
$(document).ready(function () {
alert('hello world');
});
```
~~~~~~~
请用浏览器的审查元素观念观察结果
```javascript
$(document).ready(function () {
alert('hello world');
});
```
test
## 已知问题
** 由于和discuz代码冲突，下文discuz代码均加了反斜杠 **
## Discuz代码冲突
discuz可视化编辑器会自动给链接加bbcode代码，由此会带来一些问题
- 可视化编辑器会识别图片，将图片链接加上\标签，将链接加\标签
- 纯文本会将所有链接加\（不区分图片）
插件已经对此做了处理，保证输出不会有问题。但是再次编辑帖子时看到的链接被discuz加了bbcode。
建议在后台设置默认编辑器为纯文本编辑器，以减少错误。还可以考虑禁用img, audio, flash等标签
更彻底的解决办法，可以修改discuz源代码来解决
### url相关标签
编辑 `static/js/common.js` ，找到 `parseurl` 函数
```
//str = str.replace(/([^>=\]"'\/]|^)....部分略..=\?%\-&~`@':+!]*)+\.(swf|flv))/ig, '$1\$2\[\/flash\]');
//str = str.replace(/([^>=\]"'\/]|^)....(+[\w\.\/=\?%\-&~`@':+!]*)+\.(mp3|wma))/ig, '$1\$2\[\/audio\]');
//str = str.replace(/([^>=\]"'\/@]|^)((((https?|ftp|gopher|ed2k|thunder|qqdl|synacast):....' : '$1\$2\[\/url\]');
//str = str.replace(/([^\w>=\]"'\/@]|^)((www\.)([\w\-]+\.)....' : '$1\$2\[\/url\]');
//str = str.replace(/([^\w->=\]:"'\.\/]|^)(([\-\.\w]+@[\.\-\w]... '$1\$2\[\/email\]');
````
### img标签
img标签可以通过后台禁用img标签来解决，但是这样会造成img标签发的图片变成一个链接。
修改源码 `static/js/forum.js` 及 `static/js/bbcode.js`，查找 `\` ，注释掉有 `replace` 函数的行
forum.js
```
theform.message.value = theform.message.value; //.replace(/([^>=\]"'\/]|^)((((https?|ftp):\/\/)|www\.)([\w\-]+\.)*[\w\-\u4e00-
\u9fa5]+\.([\.a-zA-Z0-9]+|\u4E2D\u56FD|\u7F51\u7EDC|\u516C\u53F8)((\?|\/|:)+[\w\.\/=\?%\-&~`@':+!]*)+\.(jpg|gif|png|bmp))/ig, '$1\$2\[\/img\]');
```
bbcode.js，有两处
```
//str = str.replace(/([^>=\]"'\/]|^)((((https?|ftp):\/\/)|www\.)([\w\-]+\.)*[\w\-\u4e00-\u9fa5]+\.([\.a-zA-Z0-9]+|\u4E2
D\u56FD|\u7F51\u7EDC|\u516C\u53F8)((\?|\/|:)+[\w\.\/=\?%\-&~`@':+!]*)+\.(jpg|gif|png|bmp))/ig, '$1\$2\[\/img\]');
````
## 表情冲突
建议修改默认的表情代码，或者直接关闭
# Mermaid使用说明
通过插件Exp，可以在 Post expand tools 中使用 Mermaid 支持流程图，时序图以及甘特图，语法如下
## 甘特图
~~~
```mermaid
gantt
dateFormatYYYY-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
```
~~~~
**效果如下：**
```mermaid
gantt
dateFormatYYYY-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
```
## 添加循环
~~~
```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
```
~~~~
**效果如下：**
```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
```
## Line&Label（节点形状间可以添加各式各样的连线，并且可以在线上添加注释；）
~~~
```mermaid
graph TB
A-->B
C---D
E--RUN!---F
G---|RUN!|H
I -.-J
K .->L
M -.RUN!.->N
O ==RUN!==>P
Q --RUN!-->R--STOP!-->S
```
~~~~
**效果如下：**
```mermaid
graph TB
A-->B
C---D
E--RUN!---F
G---|RUN!|H
I -.-J
K .->L
M -.RUN!.->N
O ==RUN!==>P
Q --RUN!-->R--STOP!-->S
```
## 流程图
### 实例一：
~~~
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
~~~~
**效果如下：**
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
### 实例二：
~~~
```mermaid
graph LR
A --> B{Is it?};
B -- Yes --> C;
C --> D;
D --> B;
B -- No ----> E;
```
~~~~
**效果如下：**
```mermaid
graph LR
A --> B{Is it?};
B -- Yes --> C;
C --> D;
D --> B;
B -- No ----> E;
```
### 实例三：
~~~
```mermaid
graph LR;
A-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
_-->E;
```
~~~~
**效果如下：**
```mermaid
graph LR;
A-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
_-->E;
```
### 实例四：
~~~
```mermaid
graph TB
subgraph one
A --> B{B0}
B -->|Yes| C
C --> D
D --> B
B ----> |No| E
end
subgraph two
F --> G{B1}
G -->|Yes| H
H--> I
I --> G
G -- NO ----> J
end
```
~~~~
**效果如下：**
```mermaid
graph TB
subgraph one
A --> B{B0}
B -->|Yes| C
C --> D
D --> B
B ----> |No| E
end
subgraph two
F --> G{B1}
G -->|Yes| H
H--> I
I --> G
G -- NO ----> J
end
```
## 时序图
~~~
```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!
```
~~~~
**效果如下：**
```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!
```
## 圆形节点
~~~
```mermaid
graph LR
id1((This is the text in the circle));
```
~~~~
**效果如下：**
```mermaid
graph LR
id1((This is the text in the circle));
```
## 非对称节点
~~~
```mermaid
graph LR
id1>This is the text in the box]
```
~~~~
**效果如下：**
```mermaid
graph LR
id1>This is the text in the box]
```
## 菱形节点
~~~
```mermaid
graph LR
id1{This is the text in the box}
```
~~~~
**效果如下：**
```mermaid
graph LR
id1{This is the text in the box}
```
## 带有箭头的连线
~~~
```mermaid
graph LR
A-->B
```
~~~~
**效果如下：**
```mermaid
graph LR
A-->B
```
## 开放的连线
~~~
```mermaid
graph LR
A --- B
```
~~~~
**效果如下：**
```mermaid
graph LR
A --- B
```
## 连线上的文本
~~~
```mermaid
graph LR
A -- This is the label text --- B;
```
~~~~
**效果如下：**
```mermaid
graph LR
A -- This is the label text --- B;
```
## 节点的样式
~~~
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```
~~~~
**效果如下：**
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
```
## fontawesome的基础支持
~~~
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C
B-->D(fa:fa-spinner);
B-->E(fa:fa-camera-retro perhaps?);
```
~~~~
**效果如下：**
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C
B-->D(fa:fa-spinner);
B-->E(fa:fa-camera-retro perhaps?);
```
## 顶点和连线之间带有空格并且没有分号的图形声明
~~~
```mermaid
graph LR
A -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D
C -->|Two| E
```
~~~~
**效果如下：**
```mermaid
graph LR
A -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D
C -->|Two| E
```
页:
[1]