首先进入theme目录,克隆tranquilpeak主题

1
2
3
cd themes
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak_0.47beta"
cd tranquilpeak_0.47beta

然后修改src/scss/themes/_hljs-custom.scss

根据_hljs-custom.scss文件的内容提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Highlight.js custom theme
// Follow guidelines
// 1. Uncomment the block just below - remove `/*` and `*/`
// 2. Fill `background`, `color`, `border-right-color` properties
// with properties of `.hljs` CSS class of your theme
// 3. Put your theme where it's indicated just below
// 4. Remove `.hljs {...}` rules
// 5. Remove `hljs-` of all CSS class name. E.g : `.hljs-comment` becomes `.comment`
// 6. Comment line 61 (`'themes/tranquilpeak',`) of `source/_css/tranquilpeak.scss` file
// 7. Run `grunt buildProd` to build the theme and see the result
// Default code block

// Highlight.js自定义主题
//遵循指南
// 1.取消注释下面的块 - 删除`/ *`和`* /`
// 2.填充`background，`color`，`border-right-color`属性
//具有主题的`.hljs` CSS类属性
// 3.将您的主题放在下方所示的位置
// 4.删除`.hljs {...}`规则
// 5.删除所有CSS类名的`hljs -`。 例如：`.hljs-comment`变为`.comment`
// 6.注释`source / _css / tranquilpeak.scss`文件的第61行（`'themes / tranquilpeak'，`）
// 7.运行`grunt buildProd`来构建主题并查看结果

修改成下面的样子，我个人使用的是solarized-dark样式

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// Highlight.js custom theme
// Follow guidelines
// 1. Uncomment the block just below - remove `/*` and `*/`
// 2. Fill `background`, `color`, `border-right-color` properties
// with properties of `.hljs` CSS class of your theme
// 3. Put your theme where it's indicated just below
// 4. Remove `.hljs {...}` rules
// 5. Remove `hljs-` of all CSS class name. E.g : `.hljs-comment` becomes `.comment`
// 6. Comment line 61 (`'themes/tranquilpeak',`) of `source/_css/tranquilpeak.scss` file
// 7. Run `grunt buildProd` to build the theme and see the result
// Default code block

// Highlight.js自定义主题
//遵循指南
// 1.取消注释下面的块 - 删除`/ *`和`* /`
// 2.填充`background，`color`，`border-right-color`属性
//具有主题的`.hljs` CSS类属性
// 3.将您的主题放在下方所示的位置
// 4.删除`.hljs {...}`规则
// 5.删除所有CSS类名的`hljs -`。 例如：`.hljs-comment`变为`.comment`
// 6.注释`source / _css / tranquilpeak.scss`文件的第61行（`'themes / tranquilpeak'，`）
// 7.运行`grunt buildProd`来构建主题并查看结果
//默认代码块
/*
pre > code {
    background: #002b36;
    color: #839496;
}

// Default inline code
code {
    background-color: #002b36;
}
*/
pre > code {
  background: #f7f8f8;
  color: #aaa;
}

// Default inline code
code {
  background-color: #f7f8f8;
}


// Tabbed code block tab
// If your theme is dark then use a lighter background
// to see clearly which tab is active
.codeblock--tabbed figcaption .tab.active {
    background: #002b36;
    color: #839496;
}

// highlight code block
figure.highlight,
.codeblock {
    background: #002b36;
    color: #839496;

    figcaption {
        background: #002b36;
        color: #839496;
    }
    .gutter {
        background: #002b36;
        border-right-color: #f7f8f8;
        .line {
            color: #839496;
        }
    }
    // PUT YOUR THEME HERE
      /* Solarized Green */
  .keyword,
  .selector-tag,
  .addition {
    color: #859900;
  }
  
  /* Solarized Cyan */
  .number,
  .string,
  .meta .meta-string,
  .literal,
  .doctag,
  .regexp {
    color: #2aa198;
  }
  
  /* Solarized Blue */
  .title,
  .section,
  .name,
  .selector-id,
  .selector-class {
    color: #268bd2;
  }
  
  /* Solarized Yellow */
  .attribute,
  .attr,
  .variable,
  .template-variable,
  .class .title,
  .type {
    color: #b58900;
  }
  
  /* Solarized Orange */
  .symbol,
  .bullet,
  .subst,
  .meta,
  .meta .keyword,
  .selector-attr,
  .selector-pseudo,
  .link {
    color: #cb4b16;
  }
  
  /* Solarized Red */
  .built_in,
  .deletion {
    color: #dc322f;
  }
  
  .formula {
    background: #073642;
  }
  
  .emphasis {
    font-style: italic;
  }
  
  .strong {
    font-weight: bold;
  }

}

修改tranquilpeak.scss

然后修改src\scss\tranquilpeak.scss第66行，把 ‘themes/hljs-tranquilpeak’,注释掉

修改完成后，即可编译

首先安装

1
2
3
npm install
npm install grunt-cli -g
grunt buildProd

如果有问题的话，可以先安装

1
npm run start

其中出现

1
2
Running "watch" task
Waiting...

的时候直接ctrl+c