Discuz 手動添加 markdown 代碼支持教程！

lovetvb

https://blog.csdn.net/m0_62749151/article/details/120818533

前言

最近需要給discuz加上markdown的解析功能，發(fā)現(xiàn)插件實(shí)在太貴了要199元，個人覺得這個功能應(yīng)該不難實(shí)現(xiàn)，于是決定自己DIY。本次使用的解析插件是marked。

介紹marked

Marked.js 是一個用 JavaScript 實(shí)現(xiàn)的、功能齊全的 Markdown 解析器和編譯器。可以非常方便的在線編譯 Markdown 代碼為 HTML 并直接顯示，并且支持完全的自定義各種格式。

最終效果

DEMO地址（base64）：aHR0cHMlM0EvL3d3dy5iZXdpbmR3YXJkLmNvbS90aHJlYWQtNjYtMS0xLmh0bWw=

實(shí)現(xiàn)過程

1、在/home/www/template/你的模板/common/header.htm中加入下面的代碼

<script src="https://cdn.bootcdn.net/ajax/libs/marked/2.1.3/marked.min.js"></script>

• 1
  

2、在/home/www/template/你的模板/common/footer.htm中加入下面的代碼

<script>    window.onload = function () {        var markdown_tags = document.getElementsByTagName("markdown");        for (var i = 0; i < markdown_tags.length; i++) {            markdown_tags.innerHTML = '<div class="custom-markdown">' + marked(markdown_tags.textContent) + "</div>";        }    }</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
  

3、在discuz后臺配置-界面－編輯器設(shè)置－Discuz代碼添加一項(xiàng)markdown，找個圖標(biāo)設(shè)置上去，可用和顯示按鈕勾上，詳情配置如下

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
  

4、將下面的css代碼保存成一個markdown.min.css文件，放到/template/default/common/目錄下

.parsedown-markdown{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.5}.parsedown-markdown h1,.parsedown-markdown h2,.parsedown-markdown h3,.parsedown-markdown h4,.parsedown-markdown h5,.parsedown-markdown h6{margin-bottom:16px;font-weight:600;line-height:1.25}.parsedown-markdown h1,.parsedown-markdown h2{padding-bottom:.3em;border-bottom:1px solid #eaecef}.parsedown-markdown h1{font-size:2em}.parsedown-markdown h2{font-size:1.5em}.parsedown-markdown h3{font-size:1.25em}.parsedown-markdown h4{font-size:1em}.parsedown-markdown h5{font-size:.875em}.parsedown-markdown h6{color:#6a737d;font-size:.85em}.parsedown-markdown em{font-style:italic}.parsedown-markdown hr{height:.2em;padding:0;margin:24px 0;border:0;background-color:#e1e4e8}.parsedown-markdown p,.parsedown-markdown blockquote,.parsedown-markdown table,.parsedown-markdown ol,.parsedown-markdown ul,.parsedown-markdown dl,.parsedown-markdown pre{margin-top:0;margin-bottom:15px}.parsedown-markdown li{margin-left:2px}.parsedown-markdown ul>li{list-style-type:disc}.parsedown-markdown ol>li{list-style-type:decimal}.parsedown-markdown pre{background-color:#f6f8fa;border-radius:6px;overflow:auto;padding:4px;font-size:85%;line-height:1.45;border:none !important}.parsedown-markdown p>code,.parsedown-markdown li>code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:6px}.parsedown-markdown pre>code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.parsedown-markdown a{color:#0645ad;text-decoration:none}.parsedown-markdown a:visited{color:#0b0080}.parsedown-markdown a:hover{color:#06e}.parsedown-markdown a:active{color:#faa700}.parsedown-markdown a:focus{outline:thin dotted}.parsedown-markdown a:hover,a:active{outline:0}.parsedown-markdown ::-moz-selection{background:rgba(255,255,0,0.3);color:#000}.parsedown-markdown ::selection{background:rgba(255,255,0,0.3);color:#000}.parsedown-markdown a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}.parsedown-markdown a::selection{background:rgba(255,255,0,0.3);color:#0645ad}.parsedown-markdown blockquote{color:#6a737d;padding:0 1em;margin:0;border-left:.25em #dfe2e5 solid}.parsedown-markdown ul,.parsedown-markdown ol{padding-left:2em;margin-left:0}.parsedown-markdown li p:last-child{margin:0}.parsedown-markdown dd{margin:0 0 0 2em}.parsedown-markdown img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;max-width:100%}.parsedown-markdown table{margin:.25em auto;width:98%;table-layout:auto;overflow:auto;border-spacing:0;border-collapse:collapse}.parsedown-markdown table thead{background-color:#d9e2df}.parsedown-markdown table tr:nth-child(2n){background-color:#f6f8fa}.parsedown-markdown table tr{border-top:1px solid #c6cbd1}.parsedown-markdown table th{font-weight:600}.parsedown-markdown table td,.parsedown-markdown table th{padding:6px 13px;border:1px solid #c6cbd1}

• 1
  

5、在/home/www/template/你的模板/forum/viewthread.htm中的<!--{hook/viewthread_top}-->上面加入下面的代碼

<link rel="stylesheet" href="./template/default/common/markdown.min.css">

• 1
  

6、此時發(fā)布帖子，點(diǎn)擊markdown圖標(biāo)后插入markdown代碼，這里注意最好用純文本模式。

7、發(fā)布的最終效果，如圖

代碼高亮優(yōu)化

請到風(fēng)洞網(wǎng)官網(wǎng)查看原文。

參考文章

https://www.jianshu.com/p/11eed27e60cd
https://www.tecbbs.com/forum.php?mod=viewthread&tid=6737

關(guān)注風(fēng)洞網(wǎng)微信公眾號！

租租

看到代碼腦殼痛

lovetvb

BBcode常用標(biāo)簽（入門）

前言：

BBCode是Bulletin Board Code的縮寫，有譯為“BB代碼”者，屬于輕量級標(biāo)記語言（Lightweight Markup Language）的一種，如字面上所顯示的，它主要是使用在BBS、論壇、Blog等網(wǎng)絡(luò)應(yīng)用上。BBCode最初由Ultimate Bulletin Board討論區(qū)系統(tǒng)發(fā)展出來，因此常見UBB代碼的稱呼。BBCode的語法通常為[標(biāo)記]的形式，即語法左右用兩個中括號包圍，以作為與正常文字間的區(qū)別。系統(tǒng)解譯時遇上中括弧便知道該處是BBcode，會在解譯結(jié)果輸出到客戶端時轉(zhuǎn)換成最為通用的HTML語法。[1]

---

BBcode有兩個主要目的：

• 便利：
  

最為通用的HTML語法雖然已相當(dāng)簡單易懂，但仍需要一定時間學(xué)習(xí)后才能上手，因此BBcode采用更為直覺易學(xué)的語法，轉(zhuǎn)換為HTML的工作則交由系統(tǒng)來代勞。

• 安全：
  

過去BBS、論壇、Blog也曾經(jīng)設(shè)計(jì)開放HTML語法讓用戶使用，但卻派生出語法輸入錯誤時造成整頁排版錯亂、有心人利用HTML語法進(jìn)行XSS式的攻擊與破壞等問題。由于BBcode的轉(zhuǎn)換為系統(tǒng)機(jī)械式的行為，所以可以有效避免人為輸入錯誤的問題，而BBcode為預(yù)先設(shè)計(jì)好的語法，也就是說意圖以BBcode達(dá)成所有的HTML語法效果是不可能的，相當(dāng)于一種語法過濾，如此便可避免所有可能發(fā)生的惡意破壞。[2]

盡管現(xiàn)在（Z世代）年齡的人大多都使用的是社交平臺自帶的富文本編輯器（比如知乎的編輯器），但是BBcode仍然在各個論壇（尤其是國內(nèi)基于Discuz的論壇）廣泛使用。

---

[3]加粗：

粗體字 Bold text

斜體：

斜體字 Italic

刪除線：

刪除線

下劃線：

下劃線

改變字號：

[size=n]大小可變 #注：1≤n≤7

URL：（郵件地址類似）

可直接插入，Discuz會識別。

當(dāng)然，你也可以這么寫：

示例網(wǎng)址

引用：

《我三》是《藝三》難以企及的標(biāo)桿

列表（無序）：

開始列表

列表項(xiàng)目

列表項(xiàng)目

列表（有序）：

[olist]開始有序號列表

列表項(xiàng)目A

列表項(xiàng)目B

[/olist]

飛行：

[fly]飛行文字[/fly]

滾動：

[move]滾動文字[/move]

參考

• ^來自Wiki-BBcode
• ^同[1]
• ^來自于x64論壇-explore的帖子 https://bbs.x64.site/forum.php?mod=viewthread&tid=2160&fromuid=171
  

false001

樓主是否可以寫成插件？修改文件不方便升級。

gulaibai

看不懂是啥意思

深淵啟源

沒想到能在dz搜到自己發(fā)的文章{:4_95:}

myboss

主要懶得研究，等著官方迭代，支持 markdown 代碼

你若安好那還得了

myboss 發(fā)表于 2024-8-26 22:34
主要懶得研究，等著官方迭代，支持 markdown 代碼

別想了，你想等到官方支持markdown？不可能的，目前放出的X5都是采用JSON編輯器，目前我看過這么多論壇，除了華為開發(fā)者論壇使用的markdown編輯器，其他的沒一個用markdown編輯器的，我猜想為啥不用（要想技術(shù)實(shí)現(xiàn)，小作坊網(wǎng)站有心無力，幾乎不可能，大一點(diǎn)的，有能力但是由于以往內(nèi)容很多突然更改編輯器可能對之前的內(nèi)容造成不可逆的后果，當(dāng)然這是我個人的猜想）

yxmsvip

為啥不格式化本文呢？

湖中沉

你若安好那還得了 發(fā)表于 2024-8-26 23:53
別想了，你想等到官方支持markdown？不可能的，目前放出的X5都是采用JSON編輯器，目前我看過這么多論壇， ...

markdown編輯器更需要一定的專業(yè)知識，實(shí)際上這種編輯器對于網(wǎng)站的受眾普通用戶來說，體驗(yàn)并不好，很多人甚至都無法理解，為什么加多個 # 號是不同級別的標(biāo)題，加多個 * 號是加粗等，所見即所得編輯器在無專業(yè)背景的用戶身上，體驗(yàn)遠(yuǎn)好于md編輯器