冰凌汇编

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 174|回复: 0
收起左侧

【帮助文档】Post expand tools编辑器使用手册

[复制链接]
bingling 发表于 2022-5-10 22:50:55

Markdown使用说明

论坛通过插件实现了在Discuz论坛解析markdown格式文档。
【帮助文档】Post expand tools编辑器使用手册 - bingling_冰凌汇编

使用方法

点击编辑器“Exp”按钮,输入代码

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

标题

atx 形式

# h1
## h2
### h3
#### h4
##### h5
###### h6
....

h1

h2

h3

h4

h5
h6

....

Setext 形式

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://链接网址

高级链接技巧

这个链接用 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://图片网址)

【帮助文档】Post expand tools编辑器使用手册 - bingling_冰凌汇编

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

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

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

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

【帮助文档】Post expand tools编辑器使用手册 - bingling_冰凌汇编.  

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

换行

如果另起一行,只需在当前行结尾加 2 个空格

在当前行的结尾加 2 个空格
这行就会新起一行
如果是要起一个新段落,只需要空出一行即可。

分隔符

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

---

上面是分隔符

符号转义

如果你的描述中需要用到 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]
````
~~~~

指定语言

用以下方式指定语言,当有代码高亮解析器的时候将起作用

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

请用浏览器的审查元素观念观察结果

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

test

已知问题

由于和discuz代码冲突,下文discuz代码均加了反斜杠

Discuz代码冲突

discuz可视化编辑器会自动给链接加bbcode代码,由此会带来一些问题

  • 可视化编辑器会识别图片,将图片链接加上[img]标签,将链接加[url]标签
  • 纯文本会将所有链接加[url](不区分图片)

插件已经对此做了处理,保证输出不会有问题。但是再次编辑帖子时看到的链接被discuz加了bbcode。

建议在后台设置默认编辑器为纯文本编辑器,以减少错误。还可以考虑禁用img, audio, flash等标签

更彻底的解决办法,可以修改discuz源代码来解决

url相关标签

编辑 static/js/common.js ,找到 parseurl 函数

//str = str.replace(/([^>=\]"'\/]|^)....部分略..=\?%\-&~`@':+!]*)+\.(swf|flv))/ig, '$1\[flash\]$2\[\/flash\]');
//str = str.replace(/([^>=\]"'\/]|^)....(+[\w\.\/=\?%\-&~`@':+!]*)+\.(mp3|wma))/ig, '$1\[audio\]$2\[\/audio\]');
//str = str.replace(/([^>=\]"'\/@]|^)((((https?|ftp|gopher|ed2k|thunder|qqdl|synacast):....' : '$1\[url\]$2\[\/url\]');
//str = str.replace(/([^\w>=\]"'\/@]|^)((www\.)([\w\-]+\.)....' : '$1\[url\]$2\[\/url\]');
//str = str.replace(/([^\w->=\]:"'\.\/]|^)(([\-\.\w]+@[\.\-\w]... '$1\[email\]$2\[\/email\]');

img标签

img标签可以通过后台禁用img标签来解决,但是这样会造成img标签发的图片变成一个链接。

修改源码 static/js/forum.jsstatic/js/bbcode.js,查找 \[img\] ,注释掉有 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\[img\]$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\[img\]$2\[\/img\]');

表情冲突

建议修改默认的表情代码,或者直接关闭

Mermaid使用说明

通过插件Exp,可以在 Post expand tools 中使用 Mermaid 支持流程图,时序图以及甘特图,语法如下

甘特图

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

效果如下:

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

添加循环

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

效果如下:

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

效果如下:

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

效果如下:

graph TD;     A-->B;     A-->C;     B-->D;     C-->D;

实例二:

```mermaid
graph LR
    A[Start] --> B{Is it?};
    B -- Yes --> C[OK];
    C --> D[Rethink];
    D --> B;
    B -- No ----> E[End];
```

效果如下:

graph LR     A[Start] --> B{Is it?};     B -- Yes --> C[OK];     C --> D[Rethink];     D --> B;     B -- No ----> E[End];

实例三:

```mermaid
graph LR;
A[aa bb]-->B(wo);
A-->C((我是C));
B-->D>我是D];
C-->D;
D-->E{我是E};
C-->E;
2-->E;
_-->E;
```

效果如下:

graph LR; A[aa bb]-->B(wo); A-->C((我是C)); B-->D>我是D]; C-->D; D-->E{我是E}; C-->E; 2-->E; _-->E;

实例四:

```mermaid
graph TB
    subgraph one
    A[A0] --> B{B0}
    B -->|Yes| C[OK0]
    C --> D[Rethink0]
    D --> B
    B ----> |No| E[End0]
    end
    subgraph two
    F[A1] --> G{B1}
    G -->|Yes| H[OK1]
    H--> I[Rethink1]
    I --> G
    G -- NO ----> J[End1]
    end
```

效果如下:

graph TB     subgraph one     A[A0] --> B{B0}     B -->|Yes| C[OK0]     C --> D[Rethink0]     D --> B     B ----> |No| E[End0]     end     subgraph two     F[A1] --> G{B1}     G -->|Yes| H[OK1]     H--> I[Rethink1]     I --> G     G -- NO ----> J[End1]     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!
```

效果如下:

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

效果如下:

graph LR     id1((This is the text in the circle));

非对称节点

```mermaid
graph LR
    id1>This is the text in the box]
```

效果如下:

graph LR     id1>This is the text in the box]

菱形节点

```mermaid
graph LR
    id1{This is the text in the box}
```

效果如下:

graph LR     id1{This is the text in the box}

带有箭头的连线

```mermaid
graph LR
    A-->B
```

效果如下:

graph LR     A-->B

开放的连线

```mermaid
graph LR
    A --- B
```

效果如下:

graph LR     A --- B

连线上的文本

```mermaid
graph LR
A -- This is the label text --- B;
```

效果如下:

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

效果如下:

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[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);

    B-->E(fa:fa-camera-retro perhaps?);
```

效果如下:

graph TD     B["fa:fa-twitter for peace"]     B-->C[fa:fa-ban forbidden]     B-->D(fa:fa-spinner);     B-->E(fa:fa-camera-retro perhaps?);

顶点和连线之间带有空格并且没有分号的图形声明

```mermaid
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]

    C -->|Two| E[Result two]
```

效果如下:

graph LR     A[Hard edge] -->|Link text| B(Round edge)     B --> C{Decision}     C -->|One| D[Result one]     C -->|Two| E[Result two]
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|站点统计|Archiver|小黑屋|RSS|冰凌汇编 ( 滇ICP备2022002049号 滇公网安备 53032102000029号)|网站地图

GMT+8, 2022-9-25 07:35 , Processed in 0.148706 second(s), 9 queries , Redis On.

冰凌汇编 - 建立于2021年12月20日

Powered by Discuz! © 2001-2022 Comsenz Inc.

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