Hexo 主题开发 -- 代码块颜色高亮

使用 Hexo 框架,在发布之后会自动给你的代码块进行区分,并没有安装其他依赖。
然后根据生成的 html 基础上进行代码高亮。
只需要匹配对应类名加上 CSS 样式就可以完成基础的代码高亮。

  • 代码块:
    • HTML
    • Javascript
    • css
  • 代码行

先开坑,慢慢填坑。可能要等到 Jeecg-boot 之后陆陆续续完成,也有可能提前,随缘。

HTML 部分

<figure class='.html'> -> html 代码块

  • .meta -> 源
  • .line -> 行
  • .tag -> 标签
    • .name -> 标签名
    • .attr -> 属性名
    • .string -> 字符串
  • .comment -> 注释
  • .javascript -> 脚本代码
    • .function -> 函数
    • .keyword -> 关键字
    • .title -> 标题
    • .params -> 参数
    • .comment -> 注释
    • .literal -> 文字
    • .number -> 数字
    • .built_in -> 内置方法/对象
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="http://www.baidu.com/a.js"></script>
<style type="text/css">
/* 注释 */
#a {
width: 100%;
height: auto;
border: 1px solid #000;
display: block;
background: rgb(0, 0, 0);
}
.b {
font-size: 15px;
}
table input {
font-size: 15px;
}
input[type='number'] {
font-size: 15px;
}
</style>
</head>
<body>
<div id="a"></div>
<div class="b"></div>
<form action="#" method="post">
<input type="button" value="1" />
<input type="checkbox" name="abc" />
</form>
<table border="1">
<thead>
<tr>
<td colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>文字</td>
<td>文字</td>
</tr>
</tbody>
</table>
<div style="border-width:5px;border-style:solid;border-color:red"></div>
<!-- HTML注释 -->
</body>
<script type="text/javascript">
function abc() {
var num = 120
let abc = 'string'
const setTrue = true
for (let i = 0; i <= 10; i++) {
console.log(i)
}
}
document.write('Hello World!')
// 单行注释
/*
* 多行注释
*
*/
</script>
</html>

JavaScript 部分

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
import { ERR_OK } from 'base.config.js'
import goodsList from 'components/index/goods/goods_list'
export default {
name: 'goods-list',
data() {
return {
goods: [],
page: 1,
size: 10,
sort: null,
viewMode: 'img',
allLoaded: false
}
},
components: { goodsList },
mounted() {
this.getGoodsList()
Indicator.open()
},
methods: {
ifelse() {
if (type === 'aaa') {
type = 'bbb'
} else {
type = 'aaa'
}
},
getGoodsList() {
let data = {
categoryId: this.categoryId,
pageNum: this.page,
pageSize: this.size
}
this.api
.getGoodsList(data)
.then(res => {
Indicator.close()
res = res.data
console.log(res)
})
.catch(err => {
console.log(err)
})
}
}
}

CSS 部分

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
/* 注释 */
#a {
width: 100%;
height: auto;
border: 1px solid #000;
display: block;
background: rgb(0, 0, 0);
}
.b {
font-size: 15px;
}
table input {
font-size: 15px;
}
input[type='number'] {
font-size: 15px;
}

@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
@media (max-width: 650px) {
#a {
font-size: 12px;
}
}