前端html页⾯使⽤marked点亮你的代码
⼀、ma rk do w n代码解析
如果后台给你的数据是markdown数据，你需要使⽤marked.js先把数据解析成通⽤格式。⽬前的marked的最新版本是0.81，最新版请⾃⾏查看，可以去bootcsn中搜索使⽤。
这⾥只介绍最简单的引⽤⽅式。
头部引⽤
<script src="cdn.bootcss/marked/0.8.1/marked.min.js"></script>
脚本引⽤
<script>
let markdown = ElementById('simplemde');
markdown.innerHTML =marked(markdown.innerHTML);
</script>
这个时候，数据就变成了html格式了。但是没有语法⾼亮，如果要语法⾼亮，请往下看
⼆、语法⾼亮⼯具
highlight.js
使⽤⽅法
1.获取highlight.js
现在最新版本是9.18.1，下⾯是官⽅给我的cdn的使⽤⽅法，样式使⽤的default的显⽰⽅式。
<link rel="stylesheet"href="//cdnjs.cloudflare/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
但是我并喜欢他的这种默认的显⽰⽅式， 我这⾥使⽤bootcdn的引⽤⽅法，使⽤monokai-sublime的样式
<link href="cdn.bootcss/highlight.js/9.18.1/styles/monokai-sublime.min.css"rel="stylesheet">
<script src="cdn.bootcss/highlight.js/9.18.1/highlight.min.js"></script>
当然这⼏种样式，也许都没有你喜欢的，你还可以去官⽹的选择，你可以选好之后，再去下载就⾏了。
下⾯是所有的样式列表，你还可以在这⾥选择并获取你喜欢的样式
demo地址：
2.如何使⽤
引⼊了以上的js之后，还需要在加载时调⽤init突出显⽰代码，如下
<script>hljs.initHighlightingOnLoad();</script>
之后，你⽹页中的代码⾼亮，就会显⽰了。类似于这样的
三、可能遇到的问题
1. ⼀开始把代码放在页⾯中，使⽤js获取代码之后，再转成markdown的代码之后，某些符号⽐如">“会被转成”>"的问题。
该问题，经过多种尝试，还未解决。如果你有好办法，乐意的话，可以告知我。
如何查看html代码我的解决⽅法，就是换成异步获取代码的⽅式。
2. 使⽤ajax获取的代码，在异步改变⽂档内容后，代码不⾼亮。
可以使⽤下⾯的代码代替init突出显⽰代码
hljs.initHighlighting();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。