https://blog.csdn.net/m0_62749151/article/details/120818533
前言最近需要給discuz加上markdown的解析功能，發(fā)現(xiàn)插件實在太貴了要199元，個人覺得這個功能應(yīng)該不難實現(xiàn)，于是決定自己DIY。本次使用的解析插件是marked。 介紹markedMarked.js 是一個用 JavaScript 實現(xiàn)的、功能齊全的 Markdown 解析器和編譯器。可以非常方便的在線編譯 Markdown 代碼為 HTML 并直接顯示，并且支持完全的自定義各種格式。
最終效果DEMO地址（base64）：aHR0cHMlM0EvL3d3dy5iZXdpbmR3YXJkLmNvbS90aHJlYWQtNjYtMS0xLmh0bWw=
![]() 實現(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>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后臺配置-界面－編輯器設(shè)置－Discuz代碼添加一項markdown，找個圖標設(shè)置上去，可用和顯示按鈕勾上，詳情配置如下 標簽：markdown替換內(nèi)容：<markdown>{1}</markdown>解釋：markdown代碼參數(shù)個數(shù)：1參數(shù)提示語：markdown嵌套次數(shù)：1允許的用戶組：全選![]()
![]()
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}5、在/home/www/template/你的模板/forum/viewthread.htm中的<!--{hook/viewthread_top}-->上面加入下面的代碼 <link rel="stylesheet" href="./template/default/common/markdown.min.css">6、此時發(fā)布帖子，點擊markdown圖標后插入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)微信公眾號！
|
關(guān)注公眾號
有償服務(wù)微信
有償服務(wù)QQ
皖公網(wǎng)安備34010302002376號 )|網(wǎng)站地圖|
發(fā)表于 2023-3-29 10:56:35
發(fā)表于 2023-4-1 18:31:33