hexo博客添加代码高亮,代码复制与评论系统

此配置针对next主题，进行代码高亮，代码块复制，评论系统相关操作

代码高亮

在主题的_config.yml搜索

1
2
Code Highlight theme

找到代码块对highlight_theme进行配置更改主题

1
2
3
4
5
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright

代码复制

http://www.zhyong.cn/posts/ca02/

有一点问题：
复制按钮显示异常

修改

1
2
display: inline-block;

为：

1
2
3

display: block;

修改后对应代码如下：

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

//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

添加评论系统

  1. 添加来必力评论系统
  2. 进行修改优化
hexo博客相关配置
#总结 #hexo
hexo博客添加代码高亮,代码复制与评论系统
https://shanhainanhua.github.io/2019/09/27/hexo博客添加代码高亮-代码复制与评论系统/
作者
wantong
发布于
2019年9月27日
许可协议