博客代碼高亮的另外一種思路

另外一種思路實現博客內插入自定義代碼框^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