前端html页面使用marked显示代码高亮

一、markdown代码解析

如果后台给你的数据是markdown数据，你需要使用marked.js先把数据解析成通用格式。目前的marked的最新版本是0.81，最新版请自行查看，可以去bootcsn.cn中搜索使用。
这里只介绍最简单的引用方式。

• 头部引用

<script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>

• 脚本引用

<script>
    let markdown = document.getElementById('simplemde');
    markdown.innerHTML = marked(markdown.innerHTML);
</script>

这个时候，数据就变成了html格式了。但是没有语法高亮，如果要语法高亮，请往下看

二、语法高亮工具

highlight.js
官网地址

使用方法

1.获取highlight.js
# Getting highlight.js
现在最新版本是9.18.1，下面是官方给我的cdn的使用方法，样式使用的default的显示方式。

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

但是我并喜欢他的这种默认的显示方式， 我这里使用bootcdn的引用方法，使用monokai-sublime的样式

<link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/monokai-sublime.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>

当然这几种样式，也许都没有你喜欢的，你还可以去官网的首页选择，你可以选好之后，再去下载就行了。
下面是所有的样式列表，你还可以在这里选择并获取你喜欢的样式

demo地址：highlight.js demo

2.如何使用
引入了以上的js之后，还需要在加载时调用init突出显示代码，如下

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

之后，你网页中的代码高亮，就会显示了。类似于这样的

三、可能遇到的问题

1. 一开始把代码放在页面中，使用js获取代码之后，再转成markdown的代码之后，某些符号比如">“会被转成”&gt"的问题。
   该问题，经过多种尝试，还未解决。如果你有好办法，乐意的话，可以告知我。
   我的解决方法，就是换成异步获取代码的方式。
2. 使用ajax获取的代码，在异步改变文档内容后，代码不高亮。
   可以使用下面的代码代替init突出显示代码

hljs.initHighlighting();