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

最新推荐文章于 2024-05-09 09:42:15 发布
最新推荐文章于 2024-05-09 09:42:15 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： 【CSS和HTML】 【JavaScript】 Rattenking 的前端笔记 文章标签： markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38082783/article/details/78548576
版权

引入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下载

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

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

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

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

Rattenking
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用JS库把Markdown转换为HTML（对后端语言无要求）
笨蛋的博客
05-24 4144
在实习单位，要求写一个类似wiki的出来，然后本人JS学的不是很好，没办短时间写出来。从网上找了好多，也没有合适的，最后在推荐 （具体是哪个大神现在找不到了 等找到马上感谢他）这个https://github.com/showdownjs/showdown/releases直接下压缩包，然后dist文件里面引入shoudown.min.js即可。 <!DOCTYPE html> &...
如何用js将markdown文档转换成html
m0_59120187的博客
08-11 1323
## markdown格式转换为html格式 ####
markdown语法转换成html,使用Showdown来把markdown语法转化成html
weixin_36166342的博客
06-03 649
有的时候我们会有这样一种需求，我们有一个用markdown格式编写的文档，希望在一个页面上展示出来(很有可能是github)，我不能用任何服务器端的语言，只能用静态数据和JavaScript。我也不希望使用任何桌面转义软件，因为这样每次发布都会很复杂——编写markdown，转义html，发布html。而我最开始使用markdown而不是html的原因是它非常快，而且在纯文本的状态下就非常具有可读...
推荐一款强大的Markdown转换器：ShowdownJS
最新发布
gitblog_00066的博客
05-09 402
推荐一款强大的Markdown转换器：ShowdownJS 项目地址:https://gitcode.com/showdownjs/showdown Markdown是一种轻量级的标记语言，它让编写文档变得简单而直观。然而，在Web开发中，我们往往需要将Markdown转换为HTML以实现更多功能。这就是ShowdownJS的作用——一个高效且灵活的Markdown到HTML的转换器。 项目简介 ...
showdown.js使用示例（把markdown转化为html）
热门推荐
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 2178
思路 markdown文本和HTML最大的不同即为markdown的超链接和图片链接与HTML中表达不同，即将超链接和图片链接转换成功，生成新的文件即可简单转换成功。 那么问题来了，如何识别链接，并将其筛选出来并用HTML的标准来表述？ 正则表示；jq中的replace替换 var imgs = file.replace(/\!(\[.*\])\((.+)\)/g, &amp;amp;quot;&amp;amp;amp;lt;/br&amp;amp;amp;gt;&amp;
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 .
vue使用showdown并实现代码区域高亮的示例代码
10-16
以下是一个简单的Vue组件示例，展示了如何使用showdown转换Markdown文本： ```html <div v-html="htmlContent"></div> import showdown from "showdown"; export default { data() { return { ...
mark-js：使用javascript渲染HTML中的markdown
02-18
2. 调用API进行转换：在JavaScript中，使用`mark.js`提供的函数将Markdown文本转换为HTML。 ```javascript var markdownText = "这是你的Markdown文本"; var html = mark(markdownText); document.getElementById('...
原生js ---- showdown制作的Markdown在线编辑器
11-15
Showdown.js库将这些语法转换为对应的HTML元素。例如，`#`符号用于创建一级标题，`**`用于加粗文本，`_`用于斜体，`>`用于创建引用块，`````用于代码高亮，`[文本](链接)`则创建链接。 在实际应用中，Markdown编辑...
Markdown-Previewer:将纯文本转换为格式化的标记
05-17
Markdown-Previewer的实现通常会依赖于JavaScript库，如marked.js或showdown.js，这些库将Markdown文本解析为HTML。开发者首先获取用户在文本区域输入的Markdown内容，然后使用这些库进行转换，最后将生成的HTML渲染...
前端项目-showdown.zip
09-02
这个项目名为"showdown"，它是一个用JavaScript编写的库，专门用于将Markdown格式的文本转换为HTML，以便在网页上以更丰富的格式显示内容。 Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式...
这是一个markdown到文档的生成工具
08-10
2. **实时预览**：使用JavaScript监听文本变化，然后通过Markdown解析库（如marked.js或showdown.js）将Markdown转换为HTML，显示在预览区域。 3. **格式化功能**：提供快捷键或按钮，方便用户快速应用Markdown语法...
渲染markdown内容的HTML元素
08-10
在JavaScript开发Markdown编辑器时，通常会使用现成的库如marked.js、showdown.js或markdown-it等，它们能方便地将Markdown文本转化为HTML。这些库通常提供API，可以自定义渲染规则，比如添加自定义的HTML类或者处理...
前端项目-ng-showdown.zip
09-02
这个组件是AngularJS与Showdown库的官方整合，Showdown是一个JavaScript库，用于将Markdown格式的文本转换为HTML。 在前端开发中，AngularJS是一个强大的MVC（Model-View-Controller）框架，由Google维护，它允许...
markdown-viewer:一个简单的markdown查看器，可以查看markdown文件并显示html结果
05-08
Markdown Viewer 使用JavaScript进行解析，可能利用了类似于marked.js或markdown-it这样的库，它们能将Markdown文本解析为HTML DOM元素。JavaScript的事件监听机制使得Markdown Viewer可以实时监测文件的更改，当...
把文章写入到html显示,在网页中使用markdown编辑文章，并通过html在网页中进行显示...
weixin_42120563的博客
06-03 578
在网页中可以通过textarea这个控件进行文本编辑，但是这个方式有点呆，而且不好看。现在记录文章用得比较多的是markdown，那么在自己的网站中集成一个markdown进行文章的记录是一件比较爽的事，而且可以不需要搞很多添加效果的按钮，比如像分段、分行、插入代码这些功能通过markdown语法就可以进行实现了第一步下载开源库：第二步将showdown.js这个文件导入文件的根目录中第三步在要使...
markdown 转 html 在线,showdown-mark转html开源项目
weixin_36046574的博客
06-03 284
Showdown is a Javascript Markdown to HTML converter, based on the original works by John Gruber.Showdown can be used client side (in the browser) or server side (with NodeJs).Live DEMOAs you know, Sho...
用showdown预览markdown文件(vue3.0)
weixin_43909743的博客
06-21 754
showdown vue or ts
如何使用HTML展示Markdown 文本
06-02
下面是一个使用 marked.js 的例子，假设你有一个 ID 为 `markdown-text` 的元素，其中包含了 Markdown 格式的文本，你可以使用以下代码将其转换为 HTML 并显示在网页中： ```html <!DOCTYPE html> <html> <title>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值