Hugo Narrow 对代码块添加了几种常用便捷功能:

  • 一键复制
  • 语言显示
  • 代码块折叠
params.yaml
1codeblock:
2  collapse:
3    enabled: true
4    defaultState: expanded # expanded, collapsed
5    autoCollapseLines: 30
6    autoCollapseHeight: 400
7    collapsedHeight: 120
点击展开查看更多

代码高亮

Hugo Narrow 使用 chroma 代码高亮,并使用 githubgithub-dark 作为亮色和暗色模式下的样式。

为更好的适配主题,本主题通过 hugo gen chromastyles --style=github > ./assets/css/github.css 方式创建样式文件并适配主题。修改高亮样式同样需要通过命令生成样式,因此替换高亮样式较为复杂:

  1. 使用 hugo cli 生成样式。
  2. 将对应的主题变量颜色在 ~/assets/css/chroma.css 中替换。
BASH
1# 查看所有样式
2hugo gen chromastyles --help
3
4# 生成样式文件
5hugo gen chromastyles --style=github > ./github.css
6hugo gen chromastyles --style=github-dark > ./github-dark.css
点击展开查看更多

版权声明

作者: Hugo Narrow

链接: https://hugo-narrow-docs.vercel.app/zh-cn/docs/%E4%BB%A3%E7%A0%81%E5%9D%97/

许可证: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键