Vue项目中引进代码高亮插件——vue-highlightjs
在做代码高亮的时候,发现需要引进代码高亮的插件,搜集资料发现以下可实现代码高亮 的插件:vue-highlightjs、DlHighlight、highlight.jsr、syntaxhighlighter、prism.js。我在使用选择了vue-highlightjs,具体...
·
- 在做代码高亮的时候,发现需要引进代码高亮的插件,搜集资料发现以下可实现代码高亮 的插件:vue-highlightjs、DlHighlight、highlight.jsr、syntaxhighlighter、prism.js。
- 我在使用选择了vue-highlightjs,具体可以参考此篇博客:vue-highlightjs代码高亮显示
- 实现效果:
html:
<pre v-highlight>
<code class="html">
<div class="content-top">
<div class="contaminantsPM">
<p>全省占比最大的首要污染物</p>
<span>PM10</span>
</div>
<div class="contaminantsO3">
<p>兰州及周边城市污染贡献占比最大</p>
<span>O3</span>
</div>
</div>
</code>
</pre>
浏览器效果:
css:
<pre v-highlight>
<code class="css">
.table {
padding: 0 0.6rem;
height: calc(100% - 3.8rem);
/deep/ .ivu-table-border:after {
display: none;
}
/deep/ .ivu-table-wrapper {
height: 100%;
}
/deep/ .ivu-table-wrapper .ivu-table-header thead tr th {
border: 1px solid rgba(73, 238, 238, 1);
background: rgba(73, 238, 238, 0.4);
color: rgba(51, 214, 193, 1);
border-bottom: none;
}
/deep/ .ivu-table:before {
background-color: rgba(73, 238, 238, 1);
}
</code>
</pre>
实现效果:
js:
<pre v-highlight>
<code class="js">
WORD : function(txt) {
var m = /^(\$?\w+)/.exec(txt);
if (m) {
var style = "operand";
var tok = this.getLastToken();
if (tok && tok.content == "function")
style += " defun";
var id = m[1];
if (id in KEYWORDS) {
style += " keyword";
if (id == "function") {
if (tok) {
if (tok.type == "operator" && tok.content == "=" ||
tok.type == "hasharrow")
tok = this.getLastToken(1);
if (tok && tok.type == "operand")
tok.style += " defun";
}
}
</code>
</pre>
实现效果:
更多推荐
已为社区贡献4条内容
所有评论(0)