首先进入theme目录,克隆tranquilpeak主题
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
文件的内容提示
// 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样式
// 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’,注释掉
修改完成后,即可编译
首先安装
npm install
npm install grunt-cli -g
grunt buildProd
如果有问题的话,可以先安装
npm run start
其中出现
Running "watch" task
Waiting...
的时候直接ctrl+c