markdown-it能够将markdown语法的内容转换为html内容，这样我们使用markdown语法写的笔记，就可以转换作为网页使用了

Markdown语法

Markdown语法图文全面详解(10分钟学会)

基础使用

安装markdown-it

npm install markdown-it --save

使用markdown-it

可以看到，使用markdown-it，我们把markdown语法的内容转为了html内容。我们发现，md内容中标记的java语言代码会包裹再pre code标签中，并且再highlight函数中回调。。

转化的html文档

代码简单高亮1

根据我们前面学到的highlight.js的用法，我们可以这么做，在编辑的时候实时高亮，就是在md转完html，并且渲染完成后，在$nextTick中，高亮对应的html就可以了。

代码高亮2（学习风宇blog）

添加功能：

• 代码高亮
• 行号
• 一键复制

  

  markdown-it 扩展插件

  有些markdown语法，在没有装插件之前不能正常显示，需要安装插件后，才能正确显示。

  使用示例

  需要安装插件，安装命令在后面

  import MarkdownIt from 'markdown-it'
  let md1 = new MarkdownIt()
  console.log('未用markdown-it-sub时: ', md1.render('H~2~0')); /* 未用markdown-it-sub时: 
  H~2~0
   */
  const md3 = new MarkdownIt().use(require('markdown-it-sub'))
  console.log('使用markdown-it-sub时: ', md3.render('H~2~0')); /* 使用markdown-it-sub时: 
  H20
   */
  console.log(md3.render('Hello from mars :satellite:'));
  md3.use(require('markdown-it-emoji')) /* 
  Hello from mars :satellite:
   */
  console.log(md3.render('Hello from mars :satellite:'));/* 
  Hello from mars 📡
   */
  

  代码

  

  安装插件

  npm i markdown-it-sub markdown-it-sup markdown-it-mark markdown-it-abbr markdown-it-container markdown-it-deflist markdown-it-emoji markdown-it-footnote markdown-it-ins markdown-it-katex-external markdown-it-task-lists --save