久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區(qū)

標(biāo)題: Discuz 手動(dòng)添加 markdown 代碼支持教程！ [打印本頁(yè)]
作者: lovetvb    時(shí)間: 2023-3-29 10:56
標(biāo)題: Discuz 手動(dòng)添加 markdown 代碼支持教程！
https://blog.csdn.net/m0_62749151/article/details/120818533

前言

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

介紹marked

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

最終效果

DEMO地址（base64）：aHR0cHMlM0EvL3d3dy5iZXdpbmR3YXJkLmNvbS90aHJlYWQtNjYtMS0xLmh0bWw=

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

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

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

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>

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

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

4、將下面的css代碼保存成一個(gè)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}

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

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

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

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

代碼高亮優(yōu)化

請(qǐng)到風(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)微信公眾號(hào)！

作者: 租租    時(shí)間: 2023-3-29 11:08
看到代碼腦殼痛
作者: lovetvb    時(shí)間: 2023-3-29 11:09
BBcode常用標(biāo)簽（入門(mén)）
前言：
BBCode是Bulletin Board Code的縮寫(xiě)，有譯為“BB代碼”者，屬于輕量級(jí)標(biāo)記語(yǔ)言（Lightweight Markup Language）的一種，如字面上所顯示的，它主要是使用在BBS、論壇、Blog等網(wǎng)絡(luò)應(yīng)用上。BBCode最初由Ultimate Bulletin Board討論區(qū)系統(tǒng)發(fā)展出來(lái)，因此常見(jiàn)UBB代碼的稱呼。BBCode的語(yǔ)法通常為[標(biāo)記](méi)的形式，即語(yǔ)法左右用兩個(gè)中括號(hào)包圍，以作為與正常文字間的區(qū)別。系統(tǒng)解譯時(shí)遇上中括弧便知道該處是BBcode，會(huì)在解譯結(jié)果輸出到客戶端時(shí)轉(zhuǎn)換成最為通用的HTML語(yǔ)法。[1]
BBcode有兩個(gè)主要目的：
最為通用的HTML語(yǔ)法雖然已相當(dāng)簡(jiǎn)單易懂，但仍需要一定時(shí)間學(xué)習(xí)后才能上手，因此BBcode采用更為直覺(jué)易學(xué)的語(yǔ)法，轉(zhuǎn)換為HTML的工作則交由系統(tǒng)來(lái)代勞。
過(guò)去BBS、論壇、Blog也曾經(jīng)設(shè)計(jì)開(kāi)放HTML語(yǔ)法讓用戶使用，但卻派生出語(yǔ)法輸入錯(cuò)誤時(shí)造成整頁(yè)排版錯(cuò)亂、有心人利用HTML語(yǔ)法進(jìn)行XSS式的攻擊與破壞等問(wèn)題。由于BBcode的轉(zhuǎn)換為系統(tǒng)機(jī)械式的行為，所以可以有效避免人為輸入錯(cuò)誤的問(wèn)題，而B(niǎo)Bcode為預(yù)先設(shè)計(jì)好的語(yǔ)法，也就是說(shuō)意圖以BBcode達(dá)成所有的HTML語(yǔ)法效果是不可能的，相當(dāng)于一種語(yǔ)法過(guò)濾，如此便可避免所有可能發(fā)生的惡意破壞。[2]

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

斜體：
斜體字 Italic

刪除線：
刪除線

下劃線：
下劃線

改變字號(hào)：
[size=n]大小可變 #注：1≤n≤7

URL：（郵件地址類似）
可直接插入，Discuz會(huì)識(shí)別。
當(dāng)然，你也可以這么寫(xiě)：
示例網(wǎng)址

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

列表（無(wú)序）：
    開(kāi)始列表
  • 列表項(xiàng)目
  • 列表項(xiàng)目

    • 列表（有序）：
    [olist]開(kāi)始有序號(hào)列表
  • 列表項(xiàng)目A
  • 列表項(xiàng)目B
    • [/olist]

    飛行：
    [fly]飛行文字[/fly]

    滾動(dòng)：
    [move]滾動(dòng)文字[/move]
    參考




    作者: false001    時(shí)間: 2023-4-1 18:31
    樓主是否可以寫(xiě)成插件？修改文件不方便升級(jí)。
    作者: gulaibai    時(shí)間: 2023-4-3 15:55
    看不懂是啥意思
    作者: 深淵啟源    時(shí)間: 2023-10-12 09:10
    沒(méi)想到能在dz搜到自己發(fā)的文章{:4_95:}
    作者: myboss    時(shí)間: 2024-8-26 22:34
    主要懶得研究，等著官方迭代，支持 markdown 代碼
    作者: 你若安好那還得了    時(shí)間: 2024-8-26 23:53
    myboss 發(fā)表于 2024-8-26 22:34
    主要懶得研究，等著官方迭代，支持 markdown 代碼

    別想了，你想等到官方支持markdown？不可能的，目前放出的X5都是采用JSON編輯器，目前我看過(guò)這么多論壇，除了華為開(kāi)發(fā)者論壇使用的markdown編輯器，其他的沒(méi)一個(gè)用markdown編輯器的，我猜想為啥不用（要想技術(shù)實(shí)現(xiàn)，小作坊網(wǎng)站有心無(wú)力，幾乎不可能，大一點(diǎn)的，有能力但是由于以往內(nèi)容很多突然更改編輯器可能對(duì)之前的內(nèi)容造成不可逆的后果，當(dāng)然這是我個(gè)人的猜想）
    作者: yxmsvip    時(shí)間: 2024-8-27 09:51
    為啥不格式化本文呢？
    作者: 湖中沉    時(shí)間: 2024-8-27 10:03
    你若安好那還得了 發(fā)表于 2024-8-26 23:53
    別想了，你想等到官方支持markdown？不可能的，目前放出的X5都是采用JSON編輯器，目前我看過(guò)這么多論壇， ...

    markdown編輯器更需要一定的專業(yè)知識(shí)，實(shí)際上這種編輯器對(duì)于網(wǎng)站的受眾普通用戶來(lái)說(shuō)，體驗(yàn)并不好，很多人甚至都無(wú)法理解，為什么加多個(gè) # 號(hào)是不同級(jí)別的標(biāo)題，加多個(gè) * 號(hào)是加粗等，所見(jiàn)即所得編輯器在無(wú)專業(yè)背景的用戶身上，體驗(yàn)遠(yuǎn)好于md編輯器
    作者: 73327424    時(shí)間: 2024-12-29 21:49

    排版亂了，修改一下



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

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

    1. <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.1.3/marked.min.js"></script>
    復(fù)制代碼


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

    1. <script>
    2.         window.onload = function() {
    3.                 var markdown_tags = document.getElementsByTagName("markdown");
    4.                 for (var i = 0; i < markdown_tags.length; i++) {
    5.                         markdown_tags.innerHTML = '<div class="custom-markdown">' + marked(markdown_tags.textContent) + "</div>";
    6.                 }
    7.         }
    8. </script>
    復(fù)制代碼


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

    標(biāo)簽：markdown

    替換內(nèi)容：<markdown>{1}</markdown>

    解釋：markdown代碼

    參數(shù)個(gè)數(shù)：1

    參數(shù)提示語(yǔ)：markdown

    嵌套次數(shù)：1

    允許的用戶組：全選


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

    1. .parsedown-markdown {
    2.         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    3.         line-height: 1.5
    4. }

    6. .parsedown-markdown h1,
    7. .parsedown-markdown h2,
    8. .parsedown-markdown h3,
    9. .parsedown-markdown h4,
    10. .parsedown-markdown h5,
    11. .parsedown-markdown h6 {
    12.         margin-bottom: 16px;
    13.         font-weight: 600;
    14.         line-height: 1.25
    15. }

    17. .parsedown-markdown h1,
    18. .parsedown-markdown h2 {
    19.         padding-bottom: .3em;
    20.         border-bottom: 1px solid #eaecef
    21. }

    23. .parsedown-markdown h1 {
    24.         font-size: 2em
    25. }

    27. .parsedown-markdown h2 {
    28.         font-size: 1.5em
    29. }

    31. .parsedown-markdown h3 {
    32.         font-size: 1.25em
    33. }

    35. .parsedown-markdown h4 {
    36.         font-size: 1em
    37. }

    39. .parsedown-markdown h5 {
    40.         font-size: .875em
    41. }

    43. .parsedown-markdown h6 {
    44.         color: #6a737d;
    45.         font-size: .85em
    46. }

    48. .parsedown-markdown em {
    49.         font-style: italic
    50. }

    52. .parsedown-markdown hr {
    53.         height: .2em;
    54.         padding: 0;
    55.         margin: 24px 0;
    56.         border: 0;
    57.         background-color: #e1e4e8
    58. }

    60. .parsedown-markdown p,
    61. .parsedown-markdown blockquote,
    62. .parsedown-markdown table,
    63. .parsedown-markdown ol,
    64. .parsedown-markdown ul,
    65. .parsedown-markdown dl,
    66. .parsedown-markdown pre {
    67.         margin-top: 0;
    68.         margin-bottom: 15px
    69. }

    71. .parsedown-markdown li {
    72.         margin-left: 2px
    73. }

    75. .parsedown-markdown ul>li {
    76.         list-style-type: disc
    77. }

    79. .parsedown-markdown ol>li {
    80.         list-style-type: decimal
    81. }

    83. .parsedown-markdown pre {
    84.         background-color: #f6f8fa;
    85.         border-radius: 6px;
    86.         overflow: auto;
    87.         padding: 4px;
    88.         font-size: 85%;
    89.         line-height: 1.45;
    90.         border: none !important
    91. }

    93. .parsedown-markdown p>code,
    94. .parsedown-markdown li>code {
    95.         font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    96.         padding: .2em .4em;
    97.         margin: 0;
    98.         font-size: 85%;
    99.         background-color: rgba(27, 31, 35, .05);
    100.         border-radius: 6px
    101. }

    103. .parsedown-markdown pre>code {
    104.         font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace
    105. }

    107. .parsedown-markdown a {
    108.         color: #0645ad;
    109.         text-decoration: none
    110. }

    112. .parsedown-markdown a:visited {
    113.         color: #0b0080
    114. }

    116. .parsedown-markdown a:hover {
    117.         color: #06e
    118. }

    120. .parsedown-markdown a:active {
    121.         color: #faa700
    122. }

    124. .parsedown-markdown a:focus {
    125.         outline: thin dotted
    126. }

    128. .parsedown-markdown a:hover,
    129. a:active {
    130.         outline: 0
    131. }

    133. .parsedown-markdown ::-moz-selection {
    134.         background: rgba(255, 255, 0, 0.3);
    135.         color: #000
    136. }

    138. .parsedown-markdown ::selection {
    139.         background: rgba(255, 255, 0, 0.3);
    140.         color: #000
    141. }

    143. .parsedown-markdown a::-moz-selection {
    144.         background: rgba(255, 255, 0, 0.3);
    145.         color: #0645ad
    146. }

    148. .parsedown-markdown a::selection {
    149.         background: rgba(255, 255, 0, 0.3);
    150.         color: #0645ad
    151. }

    153. .parsedown-markdown blockquote {
    154.         color: #6a737d;
    155.         padding: 0 1em;
    156.         margin: 0;
    157.         border-left: .25em #dfe2e5 solid
    158. }

    160. .parsedown-markdown ul,
    161. .parsedown-markdown ol {
    162.         padding-left: 2em;
    163.         margin-left: 0
    164. }

    166. .parsedown-markdown li p:last-child {
    167.         margin: 0
    168. }

    170. .parsedown-markdown dd {
    171.         margin: 0 0 0 2em
    172. }

    174. .parsedown-markdown img {
    175.         border: 0;
    176.         -ms-interpolation-mode: bicubic;
    177.         vertical-align: middle;
    178.         max-width: 100%
    179. }

    181. .parsedown-markdown table {
    182.         margin: .25em auto;
    183.         width: 98%;
    184.         table-layout: auto;
    185.         overflow: auto;
    186.         border-spacing: 0;
    187.         border-collapse: collapse
    188. }

    190. .parsedown-markdown table thead {
    191.         background-color: #d9e2df
    192. }

    194. .parsedown-markdown table tr:nth-child(2n) {
    195.         background-color: #f6f8fa
    196. }

    198. .parsedown-markdown table tr {
    199.         border-top: 1px solid #c6cbd1
    200. }

    202. .parsedown-markdown table th {
    203.         font-weight: 600
    204. }

    206. .parsedown-markdown table td,
    207. .parsedown-markdown table th {
    208.         padding: 6px 13px;
    209.         border: 1px solid #c6cbd1
    210. }
    復(fù)制代碼


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

    1. <link rel="stylesheet" href="./template/default/common/markdown.min.css">
    復(fù)制代碼


    作者: 73327424    時(shí)間: 2024-12-31 12:52
    這個(gè)已經(jīng)不能用了



    歡迎光臨 Discuz! 官方交流社區(qū) (http://www.9999xn.com/) Powered by Discuz! W1.0