欧卡2中文社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

需要三步,才能开始

只需两步,慢速开始

查看: 39824|回复: 22
收起左侧

Markdown 用户手册

[复制链接]
知行 发表于 2015-6-18 16:07 | 显示全部楼层 |阅读模式

本插件实现了在 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 +--+ |  | +--+ ```

效果:

superplot

下面是一些演示。

Graphviz

superplot

Ditaa

superplot

消息图

superplot

Asymptote

superplot

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

下面是一些演示。

时序图

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rationalthoughts prevail...Great!How about you?Jolly good!AliceBobJohn

流程图

YES
NO
YES
NO
YES
NO
开始
输入A,B,C
A是否大于B
A是否大于C
B是否大于C
输出A
输出C
输出B
结束

甘特图

w. 01w. 02w. 03Completed 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 sectionCritical tasksAdding GANTT diagram functionality to mermaid

粗斜体

 复制代码 隐藏代码
*斜体文本*    _斜体文本_ **粗体文本**    __粗体文本__ ***粗斜体文本***    ___粗斜体文本___

斜体文本  斜体文本

粗体文本  粗体文本

粗斜体文本   粗斜体文本

链接

常用链接方法

 复制代码 隐藏代码
文字链接 [链接名称](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 作为网址变量  

Google.  

然后在文档的结尾位变量赋值(网址)

换行

使用 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$

效果如 ax2+bx+c=55

跨行公式

 复制代码 隐藏代码
$$A=\begin{pmatrix} a_{11} & a_{12} & a_{13} \\ 0 & a_{22} & a_{23} \\ 0 & 0 & a_{33} \end{pmatrix}$$

显示如下

A=(a11a12a130a22a2300a33)

问题

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

 复制代码 隐藏代码
MathJax.Hub.Config({   tex2jax: {     inlineMath: [['$','$'], ['\\(','\\)']],     processEscapes: true   } });

评分

参与人数 1金币 +6 收起 理由
oppo + 6 神马都是浮云

查看全部评分

断桥残雪 发表于 2015-7-11 13:06 | 显示全部楼层
表示完全看不懂
 楼主| 知行 发表于 2015-7-11 16:47 | 显示全部楼层

照着写写就懂了

断桥残雪 发表于 2015-7-23 07:06 | 显示全部楼层
知行 发表于 2015-7-11 16:47
照着写写就懂了


这个需要在哪里运行?
 楼主| 知行 发表于 2015-7-23 15:12 | 显示全部楼层
断桥残雪 发表于 2015-7-23 07:06
这个需要在哪里运行?

额,你没看上面写的么?
tszhao 发表于 2016-12-16 12:39 | 显示全部楼层
怎么下载这个插件?
prolove 发表于 2018-3-9 14:45 | 显示全部楼层
本帖最后由 prolove 于 2018-3-9 14:47 编辑

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


```
phpinfo
```'[/md]
遗失的小许 发表于 2018-4-9 10:43 | 显示全部楼层

111

2222

33333

遗失的小许 发表于 2018-4-17 19:05 | 显示全部楼层

试试

回复 打印

使用道具 举报

遗失的小许 发表于 2018-5-3 17:57 | 显示全部楼层

<sda >

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

客服QQ936487697|联系我们|手机版|欧卡2中国 ( 湘ICP备11020288号-1 )

GMT+8, 2025-4-9 22:36 , Processed in 0.141953 second(s), 10 queries , Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表