marked转换html失败,前端html页面使用marked点亮你的代码

一、markdown代码解析

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

这里只介绍最简单的引用方式。

头部引用

脚本引用

let markdown = document.getElementById('simplemde');

markdown.innerHTML = marked(markdown.innerHTML);

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

二、语法高亮工具

highlight.js

官网地址

使用方法

1.获取highlight.js

# Getting highlight.js

现在最新版本是9.18.1，下面是官方给我的cdn的使用方法，样式使用的default的显示方式。

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

当然这几种样式，也许都没有你喜欢的，你还可以去官网的首页选择，你可以选好之后，再去下载就行了。

下面是所有的样式列表，你还可以在这里选择并获取你喜欢的样式

2.如何使用

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

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

代码高亮

三、可能遇到的问题

一开始把代码放在页面中，使用js获取代码之后，再转成markdown的代码之后，某些符号比如">"会被转成"&gt"的问题。

该问题，经过多种尝试，还未解决。如果你有好办法，乐意的话，可以告知我。

我的解决方法，就是换成异步获取代码的方式。

使用ajax获取的代码，在异步改变文档内容后，代码不高亮。

可以使用下面的代码代替init突出显示代码

hljs.initHighlighting();