本插件实现了在 Discuz 论坛解析 Markdown 格式文档。插件地址:https://addon.dismall.com/plugins/zxsq_markdown.html
注意事项
插件的核心功能是实现了一个 [md]
标签来解析 Markdown 文档。对一些增强功能,比如代码高亮,数学公式,图表等,本站均有独立插件,既可配合 Markdown 插件使用,也可以独立使用,您可以按需选择。下表是可以配合 Markdown 使用的插件。
使用方法
编辑器工具按钮
点击编辑器工具栏的 按钮 (此功能需安装插件 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,雷达图,图书封面等类型的图表。插件具有以下特点:
论坛只存储图形描述语言的代码,图片通过远程接口生成并存储在远程服务器,不占用论坛空间
支持图表类型取决于远程接口,新增功能时仅需要扩展远程接口,插件无需变动,扩展能力强
提供可选的可视化编辑器(zxsq_editor ),可按需安装
详情请访问 【超级图表】使用手册
在 Markdown 中用类似代码的语法使用超级图表功能,格式如下:
复制代码 隐藏代码 `` `plot:engine format
code
` ``
比如使用 ditaa 输出 png 图形:
复制代码 隐藏代码 `` `plot:ditaa png
+--+
| |
+--+
` ``
效果:
下面是一些演示。
Graphviz
Ditaa
消息图
Asymptote
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!
```
下面是一些演示。
时序图
Alice Bob John Hello John, how are you? Fight against hypochondria loop [ Healthcheck ] Rational thoughts prevail... Great! How about you? Jolly good! Alice Bob John
流程图
YES
NO
YES
NO
YES
NO
开始
输入A,B,C
A是否大于B
A是否大于C
B是否大于C
输出A
输出C
输出B
结束
甘特图
w. 01 w. 02 w. 03 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid A section Critical tasks Adding GANTT diagram functionality to mermaid
粗斜体
复制代码 隐藏代码 *斜体文本* _斜体文本_
**粗体文本** __粗体文本__
***粗斜体文本*** ___粗斜体文本___
斜体文本 斜体文本
粗体文本 粗体文本
粗斜体文本 粗斜体文本
链接
常用链接方法
复制代码 隐藏代码 文字链接 [链接名称] (http :
网址链接 <http :
文字链接 链接名称
网址链接 http://链接网址
高级链接技巧
复制代码 隐藏代码 这个链接用 1 作为网址变量 [Google] [1] .
这个链接用 yahoo 作为网址变量 [Yahoo!] [yahoo] .
然后在文档的结尾为变量赋值(网址)
[1] : http :
[yahoo] : http :
这个链接用 1 作为网址变量 Google .
这个链接用 yahoo 作为网址变量 Yahoo! .
然后在文档的结尾为变量赋值(网址)
列表
普通无序列表
复制代码 隐藏代码 - 列表文本前使用 [减号+空格]
+ 列表文本前使用 [加号+空格]
* 列表文本前使用 [星号+空格]
列表文本前使用 [减号+空格]
列表文本前使用 [加号+空格]
列表文本前使用 [星号+空格]
普通有序列表
复制代码 隐藏代码 1. 列表前使用 [数字+空格]
2. 我们会自动帮你添加数字
7. 不用担心数字不对,显示的时候我们会自动把这行的 7 纠正为 3
列表前使用 [数字+空格]
我们会自动帮你添加数字
不用担心数字不对,显示的时候我们会自动把这行的 7 纠正为 3
列表嵌套
复制代码 隐藏代码 1. 列出所有元素:
- 无序列表元素 A
1. 元素 A 的有序子列表
- 前面加四个空格
2. 列表里的多段换行:
前面必须加四个空格,
这样换行,整体的格式不会乱
3. 列表里引用:
> 前面空一行
> 需要缩进,顶格将打断列表
> 换行需要加两个以上空格并回车
4. 列表里代码段:
```
前面四个空格,之后按代码语法 ``` 书写
```
或者直接八个空格,引入代码块
列出所有元素:
无序列表元素 A
元素 A 的有序子列表
前面加四个空格
列表里的多段换行:
前面必须加四个空格,
这样换行,整体的格式不会乱
列表里引用:
前面空一行
需要缩进,顶格将打断列表
换行需要加两个以上空格并回车
列表里代码段:
复制代码 隐藏代码 前面四个空格,之后按代码语法 `` ` 书写
复制代码 隐藏代码 或者直接八个空格,引入代码块
引用
普通引用
复制代码 隐藏代码 > 引用文本前使用 [大于号+空格]
> 折行可以不加,新起一行都要加上哦
引用文本前使用 [大于号+空格]
折行可以不加,新起一行都要加上哦
引用里嵌套引用
复制代码 隐藏代码 > 最外层引用
> > 多一个 > 嵌套一层引用
> >> 可以嵌套很多层
最外层引用
多一个 > 嵌套一层引用
可以嵌套很多层
引用里嵌套列表
复制代码 隐藏代码 > - 这是引用里嵌套的一个列表
> - 还可以有子列表
> * 子列表需要从 - 之后延后四个空格开始
引用里嵌套代码块
复制代码 隐藏代码 > 同样的,在前面加四个空格形成代码块
>
> ```
> 或者使用 ``` 形成代码块
> ```
复制代码 隐藏代码 同样的,在前面加四个空格形成代码块
复制代码 隐藏代码 或者使用 `` ` 形成代码块
图片
跟链接的方法区别在于前面加了个感叹号 !,这样是不是觉得好记多了呢?
复制代码 隐藏代码 ![图片名称] (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 个及以上的波浪线包裹代码
复制代码 隐藏代码 ~~~
LoadModule rewrite_module modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]
~~~~
缩进
4 个空格或者一个制表符
复制代码 隐藏代码
LoadModule rewrite_module modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]
显示效果
复制代码 隐藏代码
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 $
效果如 a x 2 + b x + c = 55
跨行公式
复制代码 隐藏代码 $ $A =\begin{pmatrix}
a_{11 } & a_{12 } & a_{13 } \\
0 & a_{22 } & a_{23 } \\
0 & 0 & a_{33 }
\end{pmatrix}$ $
显示如下
A = ( a 11 a 12 a 13 0 a 22 a 23 0 0 a 33 )
问题
支持公式之后,在一段中出现多个 $
符号都会被当成公式,因此用到 $
符号时,请用 行内代码语法,即 `$`
。或者用三个反斜杠:\\\$
,并配置数学公式插件,添加 processEscapes: true
,示例如下:
复制代码 隐藏代码 MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']] ,
processEscapes: true
}
});