markdown-it

项目地址： https://github.com/ravenq/markdown-it-vue Markdonw Vue 组件库. markdown-it-vue 是一个丰富的 markdown Vue 组件，markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎，整合多种 markdown-it 插件，并内置了一些自己的功能性插件，支持 GFM TOC、GFM style、emoji等通用特性，还支持 mermaid charts、Echarts、flowchart.js 等多种图表，支持 AsciiMath、Latex 等数学公式渲染，支持 errro | warning | info 个性化提示。 在线示例 http://www.aqcoder.com/markdown 安装 npm install markdown-it-vue 特性 Official markdown syntax. GFM TOC GFM style emoji mermaid charts Echarts Flowcharts.js Subscript/Superscript AsciiMath info | error | warning message tip 使用的插件 markdown-it markdown-it-emoji markdown-it

https://github.com/markdown-it/markdown-it-container 插件开发时需要更新md文件, 否则可能因为缓存问题导致看不到新的效果 在md文件中通过使用标记在此处添加其他站点的博客链接, 如果没有显示no link或者空 官方的例子 var md = require('markdown-it')(); md.use(require('markdown-it-container'), 'spoiler', { validate: function(params) { return params.trim().match(/^spoiler\s+(.*)$/); }, render: function (tokens, idx) { var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/); if (tokens[idx].nesting === 1) { // opening tag return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n'; } else { // closing tag return '</details>\n'; } } }); console.log(md.render('

前言： 开发 vue 组件库需要提供组件的使用文档，最好是有渲染到浏览器的 demo 实例，既能操作又能查看源代码。markdown 作为常用的文档编写载体，如果能在里面直接写 vue 组件，同时编写使用说明就再好不过。流行的组件库 element-ui 的文档就是用 markdown 写出来的，看了看其处理 md 的程序后，自己也决定写一个类似的处理程序，研究一下其中的细节。 技术点 1.markdown-it 处理 markdown 最常用的工具是 markdown-it，它能把我们写的 markdown 文件转换为 html。类似于 babel，markdown 也有自己的插件系统，通过设置或者编写自定义插件改变渲染的路径。 2.webpack-loader 处理 md 文件可以使用自定义 webpack-loader 来处理，先把 md 内容转为合适 html，然后再给 vue-loader 处理。 3.cheerio 使用 markdown-it 把 md 内容转为 html 之后，需要操作 html，cherrio 以类似 jquery 的方式操作 html，简单方便。 4.hljs 代码需要高亮渲染，hijs 的功能就是将代码处理成 html，通过样式使其高亮显示出来。 步骤 1.配置 webpack 解析 md { test: /\.md$/, use:[

请使用 Chrome 浏览器。 请阅读下方文本熟悉工具使用方法，本文可直接拷贝到微信中预览。 1 Markdown Nice 简介 支持自定义样式的 Markdown 编辑器 支持微信公众号、知乎和稀土掘金 欢迎扫码回复「排版」加入用户群 2 主题 https://preview.mdnice.com/themes/ 欢迎提交主题，提供更多文章示例~~ 3 通用语法 3.1 标题 在文字写书写不同数量的 # 可以完成不同的标题，如下： 一级标题 二级标题 三级标题 3.2 无序列表 无序列表的使用，在符号 - 后加空格使用。如下： 无序列表 1 无序列表 2 无序列表 3 如果要控制列表的层级，则需要在符号 - 前使用空格。如下： 无序列表 1 无序列表 2 无序列表 2.1 无序列表 2.2 由于微信原因，最多支持到二级列表 。 3.3 有序列表 有序列表的使用，在数字及符号 . 后加空格后输入内容，如下： 有序列表 1 有序列表 2 有序列表 3 3.4 引用 引用的格式是在符号 > 后面书写文字。如下： 读一本好书，就是在和高尚的人谈话。 ——歌德 雇用制度对工人不利，但工人根本无力摆脱这个制度。 ——阮一峰 3.5 粗体和斜体 粗体的使用是在需要加粗的文字前后各加两个 * 。 而斜体的使用则是在需要斜体的文字前后各加一个 * 。 如果要使用粗体和斜体

过去的 v1 时代 距离 BetterScroll v1 版本发布，至今已经 3 年多，由于它在移动端良好的滚动体验与性能以及多种滚动场景的支持，深受社区的青睐。用户也可以基于 BetterScroll 抽象出各种复杂的业务滚动组件，期间依托于 BetterScroll，我们还开源了基于 Vue2.0 的移动端组件库 cube-ui 。 目前 BetterScroll 的 star 数已经超过 1.1 万，GitHub 有大约 3.2 万仓库使用了它。 滴滴 内部的业务，比如 国内司乘两端 、 国外司乘两端 等核心业务都大量使用 BetterScroll，它经受住了各种业务场景的考验。 随着大量的业务场景使用以及社区的反馈与建议，v1 版本也暴露了一些问题，主要分为如下四个方面： 包体积大，无法按需引用 扩展困难，增强功能易侵入核心逻辑 测试匮乏，稳定性保证差 文档不够友好，社区答疑成本高 v2 将至 先来看下最终的整体 BetterScroll v2 版本的架构图： 从整体架构图可以看出，目前整体 BetterScroll v2 版本除了实现核心滚动外，还额外提供很多插件： picker 高仿 iOS 原生 Picker 组件 mouse-wheel 兼容 PC 鼠标滚轮场景 observe-dom 自动探测 scroll 区域 DOM 改变，并且调用 refresh 方法

请使用 Chrome 浏览器。 请阅读下方文本熟悉工具使用方法，本文可直接拷贝到微信中预览。 1 Markdown Nice 简介 支持自定义样式的 Markdown 编辑器 支持微信公众号、知乎和稀土掘金 欢迎扫码回复「排版」加入用户群 2 主题 https://preview.mdnice.com/themes/ 欢迎提交主题，提供更多文章示例~~ 3 通用语法 3.1 标题 在文字写书写不同数量的 # 可以完成不同的标题，如下： 一级标题 二级标题 三级标题 3.2 无序列表 无序列表的使用，在符号 - 后加空格使用。如下： 无序列表 1 无序列表 2 无序列表 3 如果要控制列表的层级，则需要在符号 - 前使用空格。如下： 无序列表 1 无序列表 2 无序列表 2.1 无序列表 2.2 由于微信原因，最多支持到二级列表 。 3.3 有序列表 有序列表的使用，在数字及符号 . 后加空格后输入内容，如下： 有序列表 1 有序列表 2 有序列表 3 3.4 引用 引用的格式是在符号 > 后面书写文字。如下： 读一本好书，就是在和高尚的人谈话。 ——歌德 雇用制度对工人不利，但工人根本无力摆脱这个制度。 ——阮一峰 3.5 粗体和斜体 粗体的使用是在需要加粗的文字前后各加两个 * 。 而斜体的使用则是在需要斜体的文字前后各加一个 * 。 如果要使用粗体和斜体