|

| markdown是非常好用的文檔語(yǔ)言，mermaid是最流行的流程圖語(yǔ)言，katex是最流行的公式語(yǔ)言，下面來(lái)講解如何配置和使用。
以下配置純屬個(gè)人研究，僅供參考

1. 文件配置

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

1. <script src="https://cdn.bootcss.com/marked/0.7.0/marked.min.js"></script>

2. <script src="https://cdn.bootcss.com/mermaid/7.1.2/mermaid.min.js"></script>

3. <script src="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.js"></script>

4. <link rel="stylesheet" >

5. <script>mermaid.initialize({startOnLoad:true});</script>

復(fù)制代碼

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

1. window.onload = function () {

2. var markdowns = document.getElementsByTagName("markdown");

3. for (var i = 0; i < markdowns.length; i++) {

4. markdowns[i].innerHTML = marked(markdowns[i].textContent);

5. }

6. var katexs = document.getElementsByTagName("katex");

7. for (var i = 0; i < katexs.length; i++) {

8. katexs[i].innerHTML = katex.renderToString(katexs[i].textContent);

9. }

10. }

復(fù)制代碼

2. discuz后臺(tái)配置

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

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

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

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

markdown的代碼要包裹在［markdown］［/markdown］中，mermaid和katex類(lèi)似

markdown書(shū)寫(xiě)

markdown語(yǔ)法：http://www.itdecent.cn/p/191d1e21f7ed

下面是個(gè)markdown代碼：

3. 這是一級(jí)標(biāo)題

4. 這是二級(jí)標(biāo)題

5. 這是三級(jí)標(biāo)題

6. 這是四級(jí)標(biāo)題

7. 這是五級(jí)標(biāo)題

8. 這是六級(jí)標(biāo)題

9. 這是加粗的文字

10. 這是傾斜的文字

11. 這是斜體加粗的文字

12. 這是加刪除線的文字

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

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

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

16. ---

17. ---

18. ---

19. ---

20. • 列表內(nèi)容
21. • 列表內(nèi)容
22. • 列表內(nèi)容

23. 表頭|表頭|表頭

24. ------|------|-------

25. 內(nèi)容|內(nèi)容|內(nèi)容

26. 內(nèi)容|內(nèi)容|內(nèi)容

復(fù)制代碼

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

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

這是二級(jí)標(biāo)題

這是三級(jí)標(biāo)題

這是四級(jí)標(biāo)題

這是五級(jí)標(biāo)題

這是六級(jí)標(biāo)題

這是加粗的文字

這是傾斜的文字

這是斜體加粗的文字

這是加刪除線的文字

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

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

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

• 列表內(nèi)容

• 列表內(nèi)容

• 列表內(nèi)容

|

|
|

|

公式書(shū)寫(xiě)
katex語(yǔ)法：https://blog.csdn.net/lvsehaiyang1993/article/details/82832290]https://blog.csdn.net/lvsehaiyang1993/article/details/82832290

案例：

2. c = \pm\sqrt{a^2 + b^2}

3. \

4. x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

5. \

6. 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>

流程圖書(shū)寫(xiě)

meimaid語(yǔ)法：https://blog.csdn.net/fenghuizhidao/article/details/79440583

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

復(fù)制代碼

<mermaid class="mermaid" data-processed="true" 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;"><svg id="mermaidChart0" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 166.6875 283" style="max-width:166.6875px;"><g><g class="output"><g class="nodes"><g class="node" id="A" transform="translate(73.3046875,40.5)" style="opacity: 1;"><g class="label" transform="translate(0,0)"><g transform="translate(-4.203125,-10.5)"><foreignObject width="8.40625" height="21">A</foreignObject></g></g></g> <g class="node" id="B" transform="translate(34.1328125,131.5)" style="opacity: 1;"><g class="label" transform="translate(0,0)"><g transform="translate(-4.1328125,-10.5)"><foreignObject width="8.265625" height="21">B</foreignObject></g></g></g> <g class="node" id="C" transform="translate(112.4765625,131.5)" style="opacity: 1;"><g class="label" transform="translate(0,0)"><g transform="translate(-4.2109375,-10.5)"><foreignObject width="8.421875" height="21">C</foreignObject></g></g></g> <g class="node" id="D" transform="translate(73.3046875,222.5)" style="opacity: 1;"><g class="label" transform="translate(0,0)"><g transform="translate(-4.75,-10.5)"><foreignObject width="9.5" height="21">D</foreignObject></g></g></g></g></g></g></svg></mermaid>