技术宅的结界

 找回密码
 立即注册→加入我们

QQ登录

只需一步,快速开始

搜索
热搜: 下载 VB C 实现 编写
查看: 54|回复: 0
收起左侧

discuz配置支持markdown/流程图/公式

[复制链接]

273

主题

447

帖子

4836

积分

用户组: 真·技术宅

UID
2
精华
61
威望
148 点
宅币
3657 个
贡献
131 次
宅之契约
0 份
在线时间
620 小时
注册时间
2014-1-25
发表于 2019-11-29 15:47:53 | 显示全部楼层 |阅读模式

欢迎访问技术宅的结界,请注册或者登录吧。

您需要 登录 才可以下载或查看,没有帐号?立即注册→加入我们

x
markdown是非常好用的文档语言,mermaid是最流行的流程图语言,katex是最流行的公式语言,下面来讲解如何配置和使用。
以下配置纯属个人研究,仅供参考


1. 文件配置


/home/www/template/你的模板/common/header.htm中加入
<script src="https://cdn.bootcss.com/marked/0.7.0/marked.min.js"></script>
<script src="https://cdn.bootcss.com/mermaid/7.1.2/mermaid.min.js"></script>
        <script src="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.css">
        <script>mermaid.initialize({startOnLoad:true});</script>
复制代码
/home/www/template/你的模板/common/footer.htm中加入
window.onload = function () {
      var markdowns = document.getElementsByTagName("markdown");
      for (var i = 0; i < markdowns.length; i++) {
          markdowns.innerHTML = marked(markdowns.textContent);
      }
      var katexs = document.getElementsByTagName("katex");
      for (var i = 0; i < katexs.length; i++) {
          katexs.innerHTML = katex.renderToString(katexs.textContent);
      }
    }
复制代码


2. discuz后台配置

后台-界面-编辑器设置-Discuz代码,添加三项:markdown/mermaid/katex,找几个图标设置上去,可用和显示按钮勾上,详情如下:
markdown =>
标签:markdown
替换内容:<markdown>{1}</markdown >
解释:markdown代码
参数个数:1
参数提示语:markdown
嵌套次数:1
允许的用户组:全选

mermaid => (注意mermaid的class属性)
标签:mermaid
替换内容:<mermaid class="mermaid">{1} </mermaid>
解释:mermaid代码
参数个数:1
参数提示语:mermaid
嵌套次数:1
允许的用户组:全选


katex =>
标签:katex
替换内容:< katex >{1}</katex >
解释:katex代码
参数个数:1
参数提示语:katex
嵌套次数:1
允许的用户组:全选


设置好以后,就可以发帖了,注意要用纯文本,否则被加上各种html属性,相应的markdown语法就有问题了,下面举几个例子:

markdown的代码要包裹在[markdown][/markdown]中,mermaid和katex类似   




markdown书写

markdown语法:https://www.jianshu.com/p/191d1e21f7ed

下面是个markdown代码:


# 这是一级标题  

## 这是二级标题  

### 这是三级标题  

#### 这是四级标题  

##### 这是五级标题  

###### 这是六级标题  

**这是加粗的文字**  

*这是倾斜的文字*  

***这是斜体加粗的文字***  

~~这是加删除线的文字~~  

>这是引用的内容  

>>这是引用的内容  

>>>>>>>>>>这是引用的内容  

---   

----  

***   

*****   

- 列表内容  

+ 列表内容  

* 列表内容  

表头|表头|表头
------|------|-------
内容|内容|内容
内容|内容|内容



屏幕快照 2019-11-29 下午3.45.26.png



公式书写
katex语法:https://blog.csdn.net/lvsehaiyang1993/article/details/82832290]https://blog.csdn.net/lvsehaiyang1993/article/details/82832290

案例:

[mw_shl_code=applescript,true]
c = \pm\sqrt{a^2 + b^2}
\\
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\\
f(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xi[/mw_shl_code]

屏幕快照 2019-11-29 下午3.46.37.png




流程图书写

meimaid语法:https://blog.csdn.net/fenghuizhidao/article/details/79440583


[mw_shl_code=applescript,true]graph TD;     A-->B;     A-->C;     B-->D;     C-->D;[/mw_shl_code]

屏幕快照 2019-11-29 下午3.47.33.png




这里是个例子,我自己建的论坛 https://mobiletouch.xyz/forum.php?mod=viewthread&tid=11

本版积分规则

QQ|申请友链||Archiver|手机版|小黑屋|技术宅的结界 ( 滇ICP备16008837号 )|网站地图

GMT+8, 2019-12-10 15:50 , Processed in 0.085376 second(s), 31 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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