精易论坛

标题: 【帮助文档】Markdown插件使用说明 [打印本页]

作者: 精易自媒体    时间: 2019-3-29 09:44
标题: 【帮助文档】Markdown插件使用说明
本帖最后由 冰点 于 2019-4-9 15:28 编辑

Markdown使用说明


论坛通过插件实现了在Discuz论坛解析markdown格式文档。


使用方法


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


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

标题


atx 形式


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

h1


h2


h3


h4


....


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


高级链接技巧


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

  [zxsq-anti-bbcode-1]: http://www.google.com/
  [zxsq-anti-bbcode-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 作为网址变量  ![zxsq-anti-bbcode-Google][zxsq-anti-bbcode-1].  
然后在文档的结尾位变量赋值(网址)

[zxsq-anti-bbcode-1]: https://www.baidu.com/img/bdlogo.png

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


Google.  


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


换行


如果另起一行,只需在当前行结尾加 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代码,由此会带来一些问题



插件已经对此做了处理,保证输出不会有问题。但是再次编辑帖子时看到的链接被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\]');

表情冲突


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






偷个懒,本文转自52pojie~
作者: 阿杰大大    时间: 2019-3-29 09:52
头像下面的目录有问题,
作者: 夜华    时间: 2019-3-29 12:32
头像下面的目录有问题,
作者: 天生表演家    时间: 2020-4-28 19:40
能不能加个代码主题功能,这白色的背景有点看不惯,可以借鉴下这个网站
http://md.aclickall.com/
作者: 王摇摆    时间: 2022-6-6 21:14
学到了!!

作者: 啊麟    时间: 2022-12-24 16:21

h1 test



作者: Mouth    时间: 2023-5-28 13:11
感谢分享




欢迎光临 精易论坛 (https://125.confly.eu.org/) Powered by Discuz! X3.4