使用showdown.js将Markdown文档转换为HTML

最新推荐文章于 2025-09-11 09:46:29 发布

原创最新推荐文章于 2025-09-11 09:46:29 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#markdown

Rattenking 的前端笔记同时被 3 个专栏收录

112 篇文章

订阅专栏

【JavaScript】

42 篇文章

订阅专栏

【CSS和HTML】

15 篇文章

订阅专栏

本文介绍如何使用showdown.js将Markdown格式文本转换成HTML，并提供了一个简单的示例代码。此外，还分享了一些关于微信小程序和前端开发的相关资源。

引入showdown.js

<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>

通过showdown转换

var converter = new showdown.Converter();
//转换为HTML
var html = converter.makeHtml(markdownText);
//将HTML添加到你要展示的容器
alert(html);

转换前效果图

转换后效果图

demo效果

demo下载

其他

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rattenking

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

HTML：Marked-js+Bootstarp简单实现Markdown文本编辑器

有意栽花花不发，无心插柳柳成荫。

04-30

2248

hello，大家好，我是wangzirui32，今天我们来学习如何使用Marked-js+Bootstarp简单实现Markdown文本编辑器，开始学习吧！ 1. Marked-js Marked-js 是一个用 JS代码实现的 Markdown 解析器，能快速解析 Markdown 代码并生成为 HTML ，Github项目主页：https://github.com/markedjs/marked，可以由CDN引入： <script src="https://cdn.bootcdn.net/ajax

ShowDown.js MD 转HTML 时的问题

weixin_44984664的博客

06-01

715

在做数据库大作业的时候，有需要用到MD 转 HTML 找了半天资料发现用ShowDown.js 还是不错的然后就从网上抄了代码然后我…… 先说明一下环境 Django+ Boostrap 然后分析了半天，发了问题所在在此记录下解决方法产生这个问题的原因是字符串转化的问题本来要将这个字符串化为HTML 看一下在页面中的js代码结果传到里面却变成了这个发现是因为字符串里面的 \ 转义字符出了问题在后台看一下确实是这个问题接下来要解决的问题就是怎么把这个字符串转为raw .

参与评论您还未登录，请先登录后发表或查看评论

markdown语法转换成html,使用Showdown来把markdown语法转化成html

weixin_36166342的博客

06-03

814

有的时候我们会有这样一种需求，我们有一个用markdown格式编写的文档，希望在一个页面上展示出来(很有可能是github)，我不能用任何服务器端的语言，只能用静态数据和JavaScript。我也不希望使用任何桌面转义软件，因为这样每次发布都会很复杂——编写markdown，转义html，发布html。而我最开始使用markdown而不是html的原因是它非常快，而且在纯文本的状态下就非常具有可读...

plaintext.js:用于将纯文本格式（Markdown 等）转换为 HTML（STATUS=ALPHA）的 JS 库

06-27

明文.js 用于将纯文本格式转换为 HTML 的库。专为客户端纯文本呈现而。目前支持：（通过 Emscripten 编译为 JS）用法 var plaintext = require ( 'plaintext' ) ; // Also importable using require.js/AMD-style import var renderer = new plaintext . Renderer ( 'MULTIMARKDOWN' , { // or "TEXTILE", "TASKPAPER", "FOUNTAIN" exportFormat : plaintext . MultiMarkdown . ExportFormat . HTML , // default parserExtensions : [ plaintext .

docx.js与Markdown集成：Markdown到Word转换实战指南

热门推荐

jenyzhang的专栏

05-15

1万+

html代码如下： $(function() { var converter = new showdown.Converter(); var text = '#hello, markdown!', html = converter.makeH

js简单将markdown转换为html

qq_44244646的博客

02-22

2824

思路 markdown文本和HTML最大的不同即为markdown的超链接和图片链接与HTML中表达不同，即将超链接和图片链接转换成功，生成新的文件即可简单转换成功。那么问题来了，如何识别链接，并将其筛选出来并用HTML的标准来表述？正则表示；jq中的replace替换 var imgs = file.replace(/\!(\[.*\])$(.+)$/g, &amp;quot;&amp;amp;lt;/br&amp;amp;gt;&

使用showdown.js打造自己的markdown编辑器，支持table

StimmerLove的博客

04-02

6933

现在很多朋友都开始写博客了，对于技术博客而言，最好使用 MarkDown 格式来写作，因为这种格式的文档侧重于内容而不是排版，语法也很简单，到网上找找博客，很快就学会了。

vue使用showdown并实现代码区域高亮的示例代码

10-16

以下是一个简单的Vue组件示例，展示了如何使用showdown转换Markdown文本： ```html <div v-html="htmlContent"></div> import showdown from "showdown"; export default { data() { return { ...

原生js ---- showdown制作的Markdown在线编辑器

11-15

Showdown.js库将这些语法转换为对应的HTML元素。例如，`#`符号用于创建一级标题，`**`用于加粗文本，`_`用于斜体，`>`用于创建引用块，`````用于代码高亮，`[文本](链接)`则创建链接。在实际应用中，Markdown编辑...

前端项目-showdown.zip

09-02

这个项目名为"showdown"，它是一个用JavaScript编写的库，专门用于将Markdown格式的文本转换为HTML，以便在网页上以更丰富的格式显示内容。 Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式...

用JS库把Markdown转换为HTML（对后端语言无要求）

笨蛋的博客

05-24

4373

在实习单位，要求写一个类似wiki的出来，然后本人JS学的不是很好，没办短时间写出来。从网上找了好多，也没有合适的，最后在推荐（具体是哪个大神现在找不到了等找到马上感谢他）这个https://github.com/showdownjs/showdown/releases直接下压缩包，然后dist文件里面引入shoudown.min.js即可。 <!DOCTYPE html> &...

如何用js将markdown文档转换成html

m0_59120187的博客

08-11

1734

## markdown格式转换为html格式 ####

告别排版焦虑！这些 Markdown 转 HTML 神器，让你效率翻倍！

wujiayu31415的博客

02-25

2754

Markdown 转 HTML 是前端开发中不可或缺的技能，而选择合适的工具可以事半功倍。Vue Marked 是一个基于Marked.js的Vue.js插件，专为Vue项目设计，简化了Markdown转换流程。React Markdown 是一个专门为React设计的Markdown解析器，支持丰富的插件系统，能够轻松扩展功能。Markdown-it 是一个高度可配置的Markdown解析器，支持丰富的插件和扩展功能。选择社区活跃度高的工具，可以获得更好的技术支持和更丰富的资源。

showdown ( markdown解析)

weixin_44637331的博客

10-30

1377

showdown ( markdown解析) 推荐博客: https://blog.csdn.net/qiguanjiezl/article/details/105238029?utm_source=app 官方github: https://github.com/qiguanjie/showdown 基本使用在官方github拉取源码并将其中的dist下的文件导入的项目中，也可以使用在线连接资源导入（选取自己需要的version） jsDelivr： https://cdn.jsdelivr

Showdown.js 开源项目教程

gitblog_00796的博客

08-08

932

Showdown.js 开源项目教程 showdownA bidirectional Markdown to HTML to Markdown converter written in Javascript项目地址:https://gitcode.com/gh_mirrors/sh/showdown 1. 项目的目录结构及介绍 Showdown.js 是一个 JavaScript 的 Markd...

vue 中使用mardown

weixin_50903388的博客

04-28

168

【代码】vue 中使用mardown。

把文章写入到html显示,在网页中使用markdown编辑文章，并通过html在网页中进行显示...

weixin_42120563的博客

06-03

656

在网页中可以通过textarea这个控件进行文本编辑，但是这个方式有点呆，而且不好看。现在记录文章用得比较多的是markdown，那么在自己的网站中集成一个markdown进行文章的记录是一件比较爽的事，而且可以不需要搞很多添加效果的按钮，比如像分段、分行、插入代码这些功能通过markdown语法就可以进行实现了第一步下载开源库：第二步将showdown.js这个文件导入文件的根目录中第三步在要使...

用 React 编写一个笔记应用程序

weixin_57266891的博客

11-30

1567

笔记渲染：遍历，生成笔记列表。为选中的笔记添加类名。点击笔记切换当前选中的笔记。笔记创建：提供一个按钮，点击后调用创建新笔记。动态更新：通过 props 与父组件共享状态，每次父组件状态更新时，Sidebar 会自动重新渲染。

Vue组件实现：在Vue3中使用showdown转换Markdown

2. **作为Vue组件使用**：通过Vue-showdown，开发者可以将Showdown的Markdown转换功能封装成Vue组件，方便在Vue项目中直接使用Markdown语法编写内容，并将其渲染为HTML。这意味着，可以在Vue组件中直接编写Markdown...