博客代码高亮的另外一种思路

另外一种思路实现博客内插入自定义代码框^JS

cnblogs @ Orcim 　　

---

 

 

 

花 费了几日，再次写了一个博客文内插入高亮代码框的玩意儿。缘由是上次写的高亮程序，在以后发现了不少问题，并且对许多浏览器的兼容性不佳，因此想从新来过。相比于上次，此次无论是兼容性仍是界面什么的都要好不少了：

 

而且自定义项更加丰富：

原理仍是依赖于 VS Code 的 Copy With Syntax Highlighting，须要打开编辑器复制语法高亮的选项。

使用方法

今天下午就把代码上传到了GitHub上：CodeBoxBuilder，而后又花了一些时间来修复问题，现在的这个版本比较稳定了。你们能够放心使用，固然，确定有问题，欢迎反馈~若是有人看获得此文罢。以博客园为例，下面我会比较详细地介绍它的用法（步骤）。有心的话，能够本身修改样式表进行二次加工。

Step 1 准备工做

GitHub上下载CodeBoxBuilder，连接在本部分开头处，下载zip解压，在根目录下找到icons.css、codebox.css，编辑器打开这两个文件，以后打开博客园的后台：我的主页上点击管理-点击设置-找到页面定制CSS代码，将两个文件内容所有复制到输入框内。而后再在程序根目录下找到codebox.js，找到“博客侧边栏公告”，将此文件内JS代码也复制进去，同时在页面onload事件中添加addExpandBtnEvents()、addCopyBtnEvents()以及solveDatasetCSS()，如图所示：

 

Step 2 打开编辑器的语法高亮复制功能

前文我也提到过，这个web程序是依赖于VSCode的语法高亮复制功能的，其余的编辑器若是带有此类功能的话通常也适用。因此首先就要打开或激活这个功能，而后就是复制一段编辑器内高亮显示的代码。

Step 3 生成代码框的HTML

根目录下找到app.html，浏览器打开（推荐Chrome），在页面内进行粘贴操做，键盘Ctrl + V或者在页面的文本框内右键选择粘贴便可，不要粘贴为纯文本。若是剪切板内容合法，会出现第二个对话框，不然控制台会报错，而且会输出剪切板的内容，方便找到错误缘由。

第二个对话框是方便自定义的，自定义内容包括设置代码框的标题栏文字和文件图标，代码框最大高度，以及是否添加复制按钮，是否应用代码高亮区域的除文字颜色外的其余样式（斜体、粗体等），点击肯定后就能够在接下来的对话框内获得一串HTML文本。

Step 4 生效代码框

譬如博客园，新建一个随笔，找到编辑器工具栏的“编辑HTML代码”按钮（若是使用的是博客园默认的TinyMCE的编辑器的话，大概是工具栏的第二排第11个按钮），而后粘贴上一步获得的HTML文本，而后保存随笔，就好了，虽然在编辑器预览的时候感受很乱，但在查看时应用了CSS就没问题。

 

 

下面是一些demo，看下效果，嘻嘻。

演示

 

datesData.json

COPY

EXPAND

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

{

"db_path": "~/server/db/datesData.json",

"created": "2019/08/04-14:50:40",

"db": {

"2019": {

"8": {

"4": [{

"id": "[2019-08-04]#1",

"title": "建立你的第一条今日便笺",

"content": "回到「日历」页面，点击顶部右上角「添加按钮」，开始建立你的第一条便笺！\n更多信息请点击菜单中的「帮助」。",

"update_time": "14:50"

}]

}

}

},

"settings": [{

"name": "节日或事件显示程度",

"options": [{

"label": "通常",

"checked": true

}, {

"label": "普通",

"checked": false

}, {

"label": "所有",

"checked": false

}]

}, {

"name": "周首日",

"options": [{

"label": "周一",

"checked": false

}, {

"label": "周日",

"checked": true

}]

}]

}

 

datesData.json

COPY

EXPAND

 

 

cssfy.js

COPY

EXPAND

1
2
3
4
5
6
7
8
9
10

var cssfy = str => {

let arr = str.split(/;[\ ]?/);

let json = {};

arr.forEach(item => {

let r = item.split(/:[\ ]?/);

r[0] && (json[r[0]] = r[1]);

});

// console.log(arr)

return json;

};

 

cssfy.js

COPY

EXPAND

 

 

ChevronButton.vue

COPY

EXPAND

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<template>

<div class="chevron-button" :class="{[position]: true}">

<div class="activer" @mouseover="shown" @mouseout="hidden" @click="slideMonth">

<transition name="fade">

<img :src="`src/img/chevron_${position}.svg`" :alt="`chevron_${position}.svg`" v-show="chevronShow">

</transition>

</div>

</div>

</template>

<script>

export default {

"name": "chevronBtn",

"props": ["position", "chevronShow"],

"methods": {

shown () {

this.$emit("shown", this.position);

},

hidden () {

this.$emit("hidden", this.position);

},

slideMonth () {

this.$emit("slideMonth", this.position);

}

}

}

</script>

<style>

.chevron-button{

position: absolute; top: 0; z-index: 2;

display: flex; align-items: center;

width: 8px; height: 100%;

/* background-color: green; */

}

.chevron-button.left{

left: 0;

}

.chevron-button.right{

right: 0;

}

.chevron-button .activer{

display: flex; align-items: center;

height: 72%; width: 100%;

/* background-color: blue; */

opacity: .8;

}

.chevron-button .activer:active{

opacity: 1;

}

.chevron-button.left .activer{

flex-direction: row;

}

.chevron-button.right .activer{

flex-direction: row-reverse;

}

.chevron-button .activer img{

cursor: pointer; -webkit-tap-highlight-color: transparent;

}

</style>

 

ChevronButton.vue

COPY

EXPAND