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%;'

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

查看最终显示效果

uniapp 实现代码高亮相关推荐

ckeditor4.4.6添加代码高亮
研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)...
前言在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
在博客园添加Lisp(或其它)代码高亮
由于我这一段对Emacs很有兴趣,发了不少关于这玩意儿的文章.但博客园的代码高亮并不支持Emacs Lisp,之前一直也没怎么管,前几天看见李杀的这篇 Syntax Coloring with Goo ...
idea中properties配置文件没有代码提示及代码高亮问题解决方案
idea中properties配置文件没有代码提示及代码高亮问题解决方案参考文章: (1)idea中properties配置文件没有代码提示及代码高亮问题解决方案 (2)https://www.cn ...
博客园Markdown模式的MATLAB代码高亮方案
前言博客园随笔写作可以使用 Markdown 进行编辑,当展示代码时,可以使用下面的语法来对代码块进行展示: ```language code-content ``` 一般来说,指明了 lang ...
FCKeditor 2.4.3精简优化带代码高亮（Dphighlighter）插件版
FCKeditor 2.4.3精简优化带代码高亮(Dphighlighter)插件版转自:http://www.sablog.net/blog/archives/288/ 不要问我有没有上传功能,或 ...
Word中使用代码高亮插件
Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...
Discuz7使用syntaxhighlighter_2.0.320实现代码高亮
Discuz7使用syntaxhighlighter_2.0.320实现代码高亮一.修改./templates/default/discuzcode.htm文件在function tpl_code ...
代码高亮_微信公众号代码高亮美化工具 Markdown Nice
微信公众号代码高亮美化工具使用 Chrome 浏览器把右侧生成的页面直接拷贝到微信中即可. https://www.mdnice.com/ // 目录[TOC] 1. Markdown Nice 简 ...

uniapp 实现代码高亮

uniapp 实现代码高亮相关推荐

最新文章

热门文章