discuz论坛开启markdown 允许html代码嵌入js

discuz论坛开启markdown 允许html代码嵌入js - 简书 (jianshu.com)





| 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代码：

• 这是一级标题
• 这是二级标题
• 这是三级标题
• 这是四级标题
• 这是五级标题
• 这是六级标题
• 这是加粗的文字
  
• 这是倾斜的文字
  
• 这是斜体加粗的文字
  
• 这是加删除线的文字
  

• 这是引用的内容
  

• 这是引用的内容
  

• 这是引用的内容
  

• ---

• ---

• ---

• ---

• 
  
  • 列表内容
    
• 
  
  • 列表内容
    
• 
  
  • 列表内容
    
• 表头|表头|表头
  
• ------|------|-------
  
• 内容|内容|内容
  
• 内容|内容|内容
  
  

复制代码
使用标签包裹以后：
<markdown style="overflow-wrap: break-word;"># 这是一级标题
这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题这是加粗的文字
这是倾斜的文字
这是斜体加粗的文字
这是加删除线的文字

这是引用的内容

这是引用的内容

这是引用的内容

---

---

---

---

• 列表内容
  
• 列表内容
  
• 列表内容
  
  

表头表头表头
内容内容内容
内容内容内容</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
  
  

复制代码
<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;
  

复制代码
<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>