笔记

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;
  }
}