Code Highlighting & Enhancement

This page explains code block configuration: highlight engine and themes (prismjs/highlightjs), code block interaction enhancements (collapse/wrap/expand/copy/fullscreen), language labels and copy copyright. Everything lives in the code section of the theme config.

The authoritative source of the theme config is userConfig/_config.tmp.yml (it overwrites the theme config at CI time). Note: server-side prismjs rendering at the Markdown renderer level is handled by the prismjs plugin in the root _config.yml; this section covers the theme-level code block display config.

1. Highlight Engine (highlight)

Purpose: choose the highlight library, control line numbers and the light/dark theme pair.

Config (theme config, code.highlight section):

code:
  highlight:
    enable: true          # master switch
    line_number: true     # show line numbers
    lib: "prismjs"        # highlight library: highlightjs | prismjs

Notes: lib decides which engine is used and activates the corresponding sub-config below. This blog uses prismjs.

2. prismjs Themes & Render Mode

Purpose: light/dark highlight theme pairs (following light/dark mode) and how highlighting is generated.

Config (theme config, code.highlight.prismjs section):

code:
  highlight:
    prismjs:
      style: "default"            # light theme: pick a style from the round buttons at prismjs.com, or a CSS link
      style_dark: "tomorrow night" # dark theme
      preprocess: false           # true = generated statically at build; false = generated by browser JS
      treeview: true              # show treeview in code blocks (tree -F tree form)
      autolinker: true            # links inside code blocks clickable
      diffhighlight: true         # code diff highlight (+/- lines)

Two render modes compared (preprocess):

Notes: pick a style at prismjs.com and fill in the name (e.g. "tomorrow night"), or a CSS link directly. style_dark applies automatically in dark mode.

3. highlightjs Themes (backup engine)

Purpose: the following config applies if you switch lib: "highlightjs".

Config (theme config, code.highlight.highlightjs section):

code:
  highlight:
    highlightjs:
      style: "github gist"   # light theme (pick at highlightjs.org/static/demo)
      style_dark: "dark"     # dark theme

4. Code Block Enhancements (code section)

Purpose: code block display and interaction: collapse, wrapping, expand-all, fullscreen, copy button, language label.

Config (theme config, code section):

code:
  shrink: true            # code block collapsible (fold)
  break: false            # wrap lines (false = long lines scroll horizontally)
  show_full: true         # show the whole code
  height_limit: "450px"   # show_full height threshold: "expand all" button above this
  show_expand: true       # fullscreen code box
  copy_btn: true          # copy code button
  language:
    enable: true          # code block language label
    default: "TEXT"       # default label when no language given

Effects:

• show_full: true + height_limit: overly tall code blocks collapse by default, click “expand all” to view — prevents long code from breaking the page
• break: false: long lines scroll horizontally instead of wrapping, preserving code formatting
• copy_btn: true: copy button on hover, one-click copy
• code.language.default: blocks without a language show the TEXT label (change to "Code" etc.)

5. Copy Copyright (code.copyright)

Purpose: when copying post content (including code) beyond a character threshold, automatically append a copyright notice to the clipboard.

Config (theme config, code.copyright section):

code:
  copyright:
    enable: true
    minCharNumber: 120    # minimum copied chars before appending the notice
    description: This article's copyright belongs to the author. Any reproduction must credit the source.

Notes: this is copy-behavior copyright protection (distinct from the bottom copyright card post.copyright): after readers copy body/code, the pasted content ends with an auto-appended source notice.

Appendix: Code Highlight Quick Reference