加载中...

加载中...

代码高亮与增强

本页讲解代码块相关配置:高亮引擎与主题(prismjs/highlightjs)、代码块交互增强(收缩/折行/展开/复制/全屏)、语言标签、复制版权。全部在主题配置的 code 段内。

主题配置以 userConfig/_config.tmp.yml 为权威源(CI 时覆盖主题配置)。注意:Markdown 渲染器层面的 prismjs 服务端渲染由根 _config.ymlprismjs 插件负责,本节讲的是主题层的代码块展示配置。

1. 高亮引擎(highlight)

用途:选择代码高亮实现库,控制行号与明暗两套主题。

配置(主题配置,code.highlight 段):

code:
  highlight:
    enable: true          # 总开关
    line_number: true     # 是否显示行号
    lib: "prismjs"        # 高亮库:highlightjs | prismjs

说明lib 决定使用哪套引擎,并激活下方对应子配置。本博客使用 prismjs

2. prismjs 主题与渲染模式

用途:亮色/暗色两套高亮主题(跟随明暗模式切换),以及高亮生成方式。

配置(主题配置,code.highlight.prismjs 段):

code:
  highlight:
    prismjs:
      style: "default"            # 亮色主题:prismjs.com 右侧圆形按钮挑样式,或填 CSS 链接
      style_dark: "tomorrow night" # 暗色主题
      preprocess: false           # true 本地静态生成;false 浏览器 JS 生成
      treeview: true              # 代码块显示 treeview(tree -F 树形)
      autolinker: true            # 代码块中的链接可点击
      diffhighlight: true         # 代码差异高亮(+/- 行)

两种渲染模式对比preprocess):

模式说明取舍
preprocess: true构建时静态生成高亮 HTML无 JS 依赖、SEO 友好;但只支持部分 prismjs 插件
preprocess: false(当前)浏览器端由 JS 生成高亮支持全部插件(treeview/autolinker/diffhighlight);首屏多一次 JS 执行

说明:切主题在 prismjs.com 挑样式名填入(如 "tomorrow night"),也可直接填 CSS 链接。style_dark 在暗色模式下自动生效。

3. highlightjs 主题(备用引擎)

用途:若切换 lib: "highlightjs",使用以下配置。

配置(主题配置,code.highlight.highlightjs 段):

code:
  highlight:
    highlightjs:
      style: "github gist"   # 亮色主题(highlightjs.org/static/demo 挑)
      style_dark: "dark"     # 暗色主题

4. 代码块增强(code 段)

用途:代码块的展示与交互行为:折叠、折行、展开全部、全屏、复制按钮、语言标签。

配置(主题配置,code 段):

code:
  shrink: true            # 代码块是否可以收缩(折叠)
  break: false            # 代码是否折行(false 则长行横向滚动)
  show_full: true         # 代码是否全部显示
  height_limit: "450px"   # show_full 高度阈值:超过此高度显示"展开全部"按钮
  show_expand: true       # 代码框是否全屏显示
  copy_btn: true          # 复制代码按钮
  language:
    enable: true          # 代码块语言标签
    default: "TEXT"       # 未标注语言时的默认标签

效果

  • show_full: true + height_limit:超高代码块默认收起,点击"展开全部"查看,避免长代码撑爆页面
  • break: false:长行横向滚动而非折行,保持代码格式
  • copy_btn: true:悬停显示复制按钮,一键复制代码
  • code.language.default:没写语言名的代码块显示 TEXT 标签(可改成 "代码" 等)

5. 复制版权(code.copyright)

用途:复制文章内容(含代码)超过一定字符数时,自动在剪贴板追加版权声明。

配置(主题配置,code.copyright 段):

code:
  copyright:
    enable: true
    minCharNumber: 120    # 至少复制多少个字符就追加版权信息
    description: 本文章著作权归作者所有,任何形式的转载都请注明出处。

说明:这是复制行为的版权保护(区别于文章底部版权卡片 post.copyright):读者复制正文/代码后,粘贴内容末尾自动带上来源声明。

附:代码高亮速查表

配置项位置说明
高亮引擎code.highlight.libprismjs(当前)| highlightjs
行号code.highlight.line_numbertrue/false
prism 主题code.highlight.prismjs.style / style_dark亮色/暗色两套
渲染模式code.highlight.prismjs.preprocessfalse = 浏览器生成(当前)
prism 增强treeview / autolinker / diffhighlight树形/链接/差异高亮
收缩/折行code.shrink / code.break折叠与长行处理
展开全部code.show_full + height_limit超高代码块收起 + 阈值
全屏code.show_expand代码框全屏
复制按钮code.copy_btn悬停复制
语言标签code.language默认 TEXT
复制版权code.copyright复制超 120 字符追加版权
评论
数据加载中 ...