前端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>
之后,你网页中的代码高亮,就会显示了。类似于这样的
三、可能遇到的问题
- 一开始把代码放在页面中,使用js获取代码之后,再转成markdown的代码之后,某些符号比如">"会被转成">"的问题。
该问题,经过多种尝试,还未解决。如果你有好办法,乐意的话,可以告知我。
我的解决方法,就是换成异步获取代码的方式。 - 使用ajax获取的代码,在异步改变文档内容后,代码不高亮。
可以使用下面的代码代替init突出显示代码
hljs.initHighlighting();