Angular学习笔记--Markdown转HTML中highlight

本文同步发表在我的个人博客
http://www.soaringroad.com/editor/121

概述

之前有一篇介绍过Markdown转HTMLAngular5学习笔记–Html显示Markdown语言,有兴趣的同学可以参考参考，今天介绍的是另外一个Package，也会是非常好用的。

markdown-it
highlight.js

markdown-it

markdown-it是一个将markdown转化成html文本的包，并且附带了大量的功能，此外，还提供了一些插件，依赖一下就可以直接使用。

https://github.com/markdown-it/markdown-it

安装markdown-it

利用NPM，命令行输入

npm install markdown-it --save

使用markdown-it

我用的是Angular,所以

import md from 'markdown-it'; // 我用的是TypeScript，如果是Node的话，要用require
const markdown = md({
  html: true,
  xhtmlOut: false,
  breaks: false,
  langPrefix: 'language-',
  linkify: false,
  typographer: false,
  quotes: '“”‘’',
  highlight: function (/*str, lang*/) { return ''; }
});
const testText = '# 123';
markdown.render(testText)

具体使用请参照官网

highlight.js

highlight.js提供了强大的高亮的功能，不仅可以关键字高亮，还可以自动化检测语言。

https://highlightjs.org/

https://github.com/highlightjs/highlight.js

安装highlight.js

如果只是普通网页的话，直接去CDN引用文件就可以，其中default.min.css是高亮的式样，还有其他的风格可以选择。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>

如果是Nodejs或者Angular之类的话，命令行输入下面的命令，然后在index.html中引用css也好，在css文件中@import也可以。

npm install --save highlight.js

使用highlight.js

加上下面的代码，就会在画面Load时调用。

<script>hljs.initHighlightingOnLoad();</script>

当然也有手动调用的时候:

import hljs from 'highlight.js'; // 我用的是TypeScript，如果是Node的话，要用require
const highlighted = hljs.highlight('java',content,true);// 不知道语言的话可以调用highlightAuto方法，自动检测语言

具体使用请参照官网

markdown-it集成highlight

细心的你可能已经发现markdown-it的配置中有个

highlight: function (/*str, lang*/) { return ''; }

其实就是要我们写个方法，来highlight，所以，整合一下就是下面这样

import hljs from 'highlight.js';
import md from 'markdown-it';

function highlight(str, __) {
  try {
    return '<pre><code class="hljs">' + hljs.highlightAuto(str).value + '</code></pre>';
  } catch (__) {
    console.log(__);
  }
}


const markdown = md({
  html: true,
  xhtmlOut: false,
  breaks: false,
  langPrefix: 'language-',
  linkify: false,
  typographer: false,
  quotes: '“”‘’',
  highlight: highlight
});
}

四空格方式的markdown在生成<pre><code>的时候，并不会触发highlight，所以需要修改成和```一样的规则。

markdown.renderer.rules.code_block = markdown.renderer.rules.fence;