uniapp 实现代码高亮

最近在开发一款自己的小程序，新增面试答题功能其中涉及到代码显示问题，于是在社区发现了一款 插件

下载可以看一下他的index.vue文件，在methods下面新增一个方法

load() {
	this.$emit('load') // 用于通知父组件加载完成
},

然后就可以正常使用了

<!-- resource 传入markdown 语法 -->
<parser-markdown @load="load" :resource="article.content"></parser-markdown>

因为插件的本身原因，导致解析markdown语法并没有实现代码高亮（插件下方评论也给出了相应的解决方法）

所以只能通过去新增样式去设置代码的颜色

可以修改插件文件夹下parser/libs/config.js文件

在userAgentStyles 下添加以下样式（基本上就这几个样式了，可以根据自身需求修改）

		p:'margin:20rpx 0;',
		".hljs-keyword":'color: #c678dd;',
		".hljs-literal":'color: #569CD6;',
		".hljs-symbol":'color: #569CD6;',
		".hljs-name":'color: #e06c75;',
		".hljs-link":'color: #569CD6;text-decoration: underline',
		".hljs-built_in":'color: #c678dd;',
		".hljs-type":'color: #4EC9B0;',
		".hljs-number":'color: #D19A66;',
		".hljs-class":'color: #B8D7A3;',
		".hljs-string":'color: #98C379;',
		".hljs-meta-string":'color: #D69D85;',
		".hljs-regexp":'color: #9A5334;',
		".hljs-template-tag":'color: #9A5334;',
		".hljs-subst":'color: #DCDCDC;',
		".hljs-function":'color: #c678dd;',
		".hljs-title":'color: #61afef;',
		".hljs-params":'color: #ABB2BF;',
		".hljs-formula":'color: #DCDCDC;',
		".hljs-comment":'color: #5B6370;opacity.6;font-style: italic;',
		".hljs-quote":'color: #57A64A;font-style: italic;',
		".hljs-doctag":'color: #608B4E;',
		".hljs-meta":'color: #abb2bf;',
		".hljs-tag":'color: #abb2bf;',
		".hljs-meta-keyword":'color: #abb2bf;',
		".hljs-variable":'color: #e06c75;',
		".hljs-template-variable":'color: #e06c75;',
		".hljs-attr":'color: #D19A66;',
		".hljs-attribute":'color: #D19A66;',
		".hljs-builtin-name":'color: #ABB2BF;',
		".hljs-section":'color: gold;',
		".hljs-emphasis":'font-style: italic;',
		".hljs-strong":'font-weight: bold;',
		".hljs-bullet":'color: #D7BA7D;',
		".hljs-selector-tag":'color: #e06c75;',
		".hljs-selector-id":'color: #D19A66;',
		".hljs-selector-class":'color: #D19A66;',
		".hljs-selector-attr":'color: #D19A66;',
		".hljs-selector-pseudo":'color: #D7BA7D;',
		'.language-html':'color:#ABB2BF',
		'.language-css':'color:#ABB2BF',
		'.language-javascript':'color:#ABB2BF',
		".hljs-addition":'background-color: #144212;display: inline-block;width: 100%;',
		".hljs-deletion":'background-color: #600;display: inline-block;width: 100%;'

改完后就可以看到正常的效果

查看最终显示效果