Marked.js - HTML 中直接解析显示 Markdown

What

Marked.js 是一个 Markdown 解析和编译器，可以在 JavaScript 中将 Markdown 转为 HTML。结合 HTML DOM，可以实现在 HTML 中直接解析显示 Markdown。

How To Use

在 <textarea> 中编写 Markdown：

<!doctype html>
<html>
<head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><title>Marked.js</title>
</head>
<body><div id="$m" class="markdown-body"></div><textarea id="$t" style="display:none">
*Write* your **Markdown** here.</textarea><script>$m.innerHTML = marked.parse($t.value);</script>
</body>
</html>

用浏览器直接打开效果如下：

github-markdown-css：仿 GitHub Markdown 样式：

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width initial-scale=1"><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css"><style>
@media (max-width: 767px) { body { padding: 15px; } }
body { box-sizing: border-box;min-width: 200px;max-width: 980px;margin: 0 auto;padding: 45px; }</style><title>Marked.js</title>
</head>
<body><div id="$m" class="markdown-body"></div><textarea id="$t" style="display:none">
# Hello World
*Write* `your` **Markdown** here.</textarea><script>$m.innerHTML = marked.parse($t.value);</script>
</body>
</html>

Marked.js - HTML 中直接解析显示 Markdown相关推荐

vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
js文件中发送ajax请求,ulr路径不起作用的解决办法
前言: 在写Python项目的时候,单独的js文件发送ajax请求,并不起效果并且提示路径错误错误原因分析: {% url 'myadmin_updategoodsgrade' %} # 是模板中的 ...
marked.js读取markdown文件，图片实现点击放大
marked.js图片实现点击放大一.基础配置二.设置回调三.最终代码四.优化方向一.基础配置当前前端渲染markdown文件比较好的插件就是marked.js了. import mark ...
在React中解析渲染markdown文件
解决办法安装marked对md文件进行解析 npm install marked --save 基本使用 import { marked } from 'marked';const renderer ...
完美：C# Blazor中显示Markdown并添加代码高亮
昨天发了一篇介绍这个库:C# Blazor中显示Markdown文件,介绍怎么在Blazor中显示Markdown内容的文章,文章内的代码是没有高亮的,思来相去,还是要做好,于是百度到这篇文章.NET ...
利用marked.js写个简单Markdown编辑器(1)
Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客. 最近想自己动手写一个博客系统,然后查了下博客系统一般构造,发现目前大部分博客把Markdown作为博客的标配了 ...
【Android 逆向】arm 汇编 ( 使用 IDA 解析 arm 架构的动态库文件 | 使用 IDA 打开 arm 动态库文件 | 切换 IDA 中汇编代码显示样式 )
文章目录一.使用 IDA 打开 arm 动态库文件二.切换 IDA 中汇编代码显示样式一.使用 IDA 打开 arm 动态库文件分析 Android SDK 中的 arm 架构的动态库 , 动 ...
介绍这个库：C# Blazor中显示Markdown文件
1 讲目的前几天上线了一个在线Icon转换工具[1],为了让大家使用放心,改了点代码,在转换下载Icon图标后立即删除临时文件,并在工具下面贴上了工具的开发步骤和代码,大家看这样改是否合适,见Iss ...
MarkDown中的表格在jekyll的pages博客中不能正常显示
本文转自https://ask.csdn.net/questions/259502,所有权力归原作者所有. 求大神支招,万分感谢!!!,如何可以经过jekyll编译好后显示正常的表格? 这是用mark ...

Marked.js - HTML 中直接解析显示 Markdown

What

How To Use

More

Marked.js - HTML 中直接解析显示 Markdown相关推荐

最新文章

热门文章