discuz論壇開啟markdown 允許html代碼嵌入js

| 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" >
<script>mermaid.initialize({startOnLoad:true});</script>

復(fù)制代碼

/home/www/template/你的模板/common/footer.htm中加入

window.onload = function () {
var markdowns = document.getElementsByTagName("markdown");
for (var i = 0; i < markdowns.length; i++) {
markdowns[i].innerHTML = marked(markdowns[i].textContent);
}
var katexs = document.getElementsByTagName("katex");
for (var i = 0; i < katexs.length; i++) {
katexs[i].innerHTML = katex.renderToString(katexs[i].textContent);
}
}

復(fù)制代碼

2. discuz后臺配置

后臺－界面－編輯器設(shè)置－Discuz代碼，添加三項(xiàng)：markdown/mermaid/katex痢虹，找?guī)讉€圖標(biāo)設(shè)置上去被去，可用和顯示按鈕勾上，詳情如下：
markdown =>
標(biāo)簽：markdown
替換內(nèi)容：<markdown>{1}</markdown >
解釋：markdown代碼
參數(shù)個數(shù)：1
參數(shù)提示語：markdown
嵌套次數(shù)：1
允許的用戶組：全選

mermaid => (注意mermaid的class屬性)
標(biāo)簽：mermaid
替換內(nèi)容：<mermaid class="mermaid">{1} </mermaid>
解釋：mermaid代碼
參數(shù)個數(shù)：1
參數(shù)提示語：mermaid
嵌套次數(shù)：1
允許的用戶組：全選

katex =>
標(biāo)簽：katex
替換內(nèi)容：< katex >{1}</katex >
解釋：katex代碼
參數(shù)個數(shù)：1
參數(shù)提示語：katex
嵌套次數(shù)：1
允許的用戶組：全選

設(shè)置好以后奖唯，就可以發(fā)帖了惨缆，注意要用純文本，否則被加上各種html屬性丰捷，相應(yīng)的markdown語法就有問題了坯墨，下面舉幾個例子：

markdown的代碼要包裹在［markdown］［/markdown］中，mermaid和katex類似

markdown書寫

markdown語法：http://www.reibang.com/p/191d1e21f7ed

下面是個markdown代碼：

這是一級標(biāo)題
這是二級標(biāo)題
這是三級標(biāo)題
這是四級標(biāo)題
這是五級標(biāo)題
這是六級標(biāo)題
這是加粗的文字
這是傾斜的文字
這是斜體加粗的文字
~~這是加刪除線的文字~~
這是引用的內(nèi)容
這是引用的內(nèi)容
這是引用的內(nèi)容
- 列表內(nèi)容
- 列表內(nèi)容
- 列表內(nèi)容
表頭|表頭|表頭
------|------|-------
內(nèi)容|內(nèi)容|內(nèi)容
內(nèi)容|內(nèi)容|內(nèi)容

復(fù)制代碼

使用標(biāo)簽包裹以后：

<markdown style="overflow-wrap: break-word;"># 這是一級標(biāo)題

這是二級標(biāo)題

這是三級標(biāo)題

這是四級標(biāo)題

這是五級標(biāo)題

這是六級標(biāo)題

這是加粗的文字

這是傾斜的文字

這是斜體加粗的文字

~~這是加刪除線的文字~~

這是引用的內(nèi)容

列表內(nèi)容
列表內(nèi)容
列表內(nèi)容

表頭	表頭	表頭
內(nèi)容	內(nèi)容	內(nèi)容
內(nèi)容	內(nèi)容	內(nèi)容	</markdown>

|
|

公式書寫
katex語法：https://blog.csdn.net/lvsehaiyang1993/article/details/82832290]https://blog.csdn.net/lvsehaiyang1993/article/details/82832290

案例：

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

復(fù)制代碼

<katex style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><annotation encoding="application/x-tex">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 \ </annotation></semantics></math>c=±a2+b2?x=2a?b±b2?4ac??f(x)=∫?∞∞?f?ξe2πiξxdξ </katex>

流程圖書寫

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

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

復(fù)制代碼