首言
Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。好了,简单介绍一下,直接上干货
这里我使用的插件是Editor.md,完全开源
1. github地址:pandao/editor.md: The open source embeddable online markdown editor (component). (github.com)
2. 在线文档 Editor.md examples (pandao.github.io)
3. js文件 editormd.7z
4. 源代码 yylcha.markdown.7z
markdown转HTML的显示处理
这个组件支持的场景非常多,但是我当前的应用,只用到了显示
引用文件
实现
HTML Code
text area不要显示,有一个默认值,这个默认值是markdown语法的字符串,不要加任何的特殊符号,不然editdor.md会识别不出来
<div class="Markdown">
<div id="vMarkdown">
<div id="markdownView">
<textarea id="append-test" style="display:none;">
概要
提示：这里可以添加技术概要
例如：
openAI 的 GPT 大模型的发展历程。
整体架构流程
提示：这里可以添加技术整体架构
例如：
在语言模型中，编码器和解码器都是由一个个的 Transformer 组件拼接在一起形成的。
技术名词解释
提示：这里可以添加技术名词解释
例如：
* Bert
* GPT 初代
* GPT-2
* GPT-3
* ChatGPT
技术细节
提示：这里可以添加技术细节
例如：
* API
* 支持模型类型
小结
提示：这里可以添加总结
例如：
提供先进的推理，复杂的指令，更多的创造力。
</textarea>
</div>
</div>
</div>Javascript Code
<script type="text/javascript">
$(function () {
var markdownView;
markdownView = editormd.markdownToHTML("markdownView", {
htmlDecode: "style,script,iframe", // you can filter tags decode
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
});
});
</script>css Code
<style>
.editormd-html-preview {
width: 90%;
margin: 0 auto;
}
</style>效果展示
注意事项
1.表格语法中不要使用 | 符号,会造成你的展示效果图乱布局,如下截图
我的原意是 导管|例子 在作者的issue有人提过这个问题,但是目前没有处理,我去csdn试了下,也有类似的问题
2.表格语法中,当表格最后一个列的值是空字符串并且有\r的时候,会出现 右边的 边框消失的问题
解决方案:推荐当是空字符串的时候,使用 nbsp; 来代替,亲测可用,这个情况是只有代码拼接markdown语法的时会出现,特此记录
重现图:
评论区