Discuz!小编 发表于 2024-9-4 11:23:02

Discuz 手动添加 markdown 代码支持教程!

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

前言最近需要给discuz加上markdown的解析功能,发现插件实在太贵了要199元,个人觉得这个功能应该不难实现,于是决定自己DIY。本次使用的解析插件是marked。
介绍markedMarked.js 是一个用 JavaScript 实现的、功能齐全的 Markdown 解析器和编译器。可以非常方便的在线编译 Markdown 代码为 HTML 并直接显示,并且支持完全的自定义各种格式。
最终效果DEMO地址(base64):aHR0cHMlM0EvL3d3dy5iZXdpbmR3YXJkLmNvbS90aHJlYWQtNjYtMS0xLmh0bWw=

实现过程1、在/home/www/template/你的模板/common/header.htm中加入下面的代码

1
2、在/home/www/template/你的模板/common/footer.htm中加入下面的代码
    window.onload = function () {      var markdown_tags = document.getElementsByTagName("markdown");      for (var i = 0; i < markdown_tags.length; i++) {            markdown_tags.innerHTML = '' + marked(markdown_tags.textContent) + "";      }    }
12345678
3、在discuz后台配置-界面-编辑器设置-Discuz代码添加一项markdown,找个图标设置上去,可用和显示按钮勾上,详情配置如下
标签:markdown替换内容:{1}解释:markdown代码参数个数:1参数提示语:markdown嵌套次数:1允许的用户组:全选
1234567
https://img-blog.csdnimg.cn/img_convert/93df12189d507f9421b8a8c0994667a3.png
https://img-blog.csdnimg.cn/img_convert/60b2f87aef152e0adf7c9e0f55dbbf92.png
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中的上面加入下面的代码

1
6、此时发布帖子,点击markdown图标后插入markdown代码,这里注意最好用纯文本模式。
https://img-blog.csdnimg.cn/img_convert/2038997d099cff38f7dba87a3f5b3be3.png
7、发布的最终效果,如图

代码高亮优化请到风洞网官网查看原文。
参考文章https://www.jianshu.com/p/11eed27e60cd
https://www.tecbbs.com/forum.php?mod=viewthread&tid=6737
关注风洞网微信公众号!

Jessie 发表于 2024-9-4 11:23:22

看到代码脑壳痛

瑾瑜 发表于 2024-9-4 11:23:56

BBcode常用标签(入门)
前言:
BBCode是Bulletin Board Code的缩写,有译为“BB代码”者,属于轻量级标记语言(Lightweight Markup Language)的一种,如字面上所显示的,它主要是使用在BBS、论坛、Blog等网络应用上。BBCode最初由Ultimate Bulletin Board讨论区系统发展出来,因此常见UBB代码的称呼。BBCode的语法通常为[標記]的形式,即语法左右用两个中括号包围,以作为与正常文字间的区别。系统解译时遇上中括弧便知道该处是BBcode,会在解译结果输出到客户端时转换成最为通用的HTML语法。
BBcode有两个主要目的:
便利:
最为通用的HTML语法虽然已相当简单易懂,但仍需要一定时间学习后才能上手,因此BBcode采用更为直觉易学的语法,转换为HTML的工作则交由系统来代劳。
安全:
过去BBS、论坛、Blog也曾经设计开放HTML语法让用户使用,但却派生出语法输入错误时造成整页排版错乱、有心人利用HTML语法进行XSS式的攻击与破坏等问题。由于BBcode的转换为系统机械式的行为,所以可以有效避免人为输入错误的问题,而BBcode为预先设计好的语法,也就是说意图以BBcode达成所有的HTML语法效果是不可能的,相当于一种语法过滤,如此便可避免所有可能发生的恶意破坏。

尽管现在(Z世代)年龄的人大多都使用的是社交平台自带的富文本编辑器(比如知乎的编辑器),但是BBcode依旧在各个论坛(尤其是国内基于Discuz的论坛)广泛使用。
加粗:
粗体字 Bold text

斜体:
斜体字 Italic

删除线:
</strike>删除线</strike>

下划线:
下划线

改变字号:
大小可变 #注:1≤n≤7

URL:(邮件地址类似)
可直接插入,Discuz会识别。
当然,你也可以这么写:
示例网址

引用:
《我三》是《艺三》难以企及的标杆

列表(无序):

开始列表
列表项目
列表项目



列表(有序):
开始有序号列表
列表项目A
列表项目B


飞行:
飞行文字

滚动:
滚动文字
参考
^来自Wiki-BBcode^同^来自于x64论坛-explore的帖子 https://bbs.x64.site/forum.php?mod=viewthread&tid=2160&fromuid=171



KarlMock59 发表于 2024-9-4 11:24:42

楼主是否可以写成插件?修改文件不方便升级。

瑾瑜 发表于 2024-9-4 11:25:19

看不懂是啥意思

KarlMock59 发表于 2024-9-4 11:25:46

没想到能在dz搜到自己发的文章{:4_95:}

凡若尘 发表于 2024-9-4 11:26:36

主要懒得研究,等着官方迭代,支持 markdown 代码

Sylvia 发表于 2024-9-4 11:27:30

别想了,你想等到官方支持markdown?不可能的,目前放出的X5都是采用JSON编辑器,目前我看过这么多论坛,除了华为开发者论坛使用的markdown编辑器,其他的没一个用markdown编辑器的,我猜想为啥不用(要想技术实现,小作坊网站有心无力,几乎不可能,大一点的,有能力但是由于以往内容很多突然更改编辑器可能对之前的内容造成不可逆的后果,当然这是我个人的猜想)

Jessie 发表于 2024-9-4 11:28:04

为啥不格式化本文呢?

Sylvia 发表于 2024-9-4 11:28:29

markdown编辑器更需要一定的专业知识,实际上这种编辑器对于网站的受众普通用户来说,体验并不好,很多人甚至都无法理解,为什么加多个 # 号是不同级别的标题,加多个 * 号是加粗等,所见即所得编辑器在无专业背景的用户身上,体验远好于md编辑器
页: [1]
查看完整版本: Discuz 手动添加 markdown 代码支持教程!