feat(syntax-highlight): migrate to Shiki for syntax highlighting

[brodienguyen]

This pull request migrates the site's syntax highlighting from Highlight.js to Shiki, providing build-time code highlighting with improved theme support and simplified CSS. It removes all Highlight.js dependencies, updates relevant documentation, and introduces Shiki integration into the Eleventy build pipeline. The version is also updated to a new beta release.

Migration to Shiki syntax highlighting:

• Replaces Highlight.js with Shiki for syntax highlighting by integrating @shikijs/markdown-it into the Eleventy configuration (.eleventy.js). Shiki is now used as a Markdown-it plugin with custom theme and language aliasing. [1] [2] [3]
• Removes all Highlight.js-related scripts from the base layout (_includes/layouts/base.njk).
• Deletes the custom Highlight.js CSS (src/css/highlight.css) and replaces it with a new Shiki-specific stylesheet (src/css/shiki.css). The main stylesheet now imports shiki.css instead of highlight.css. [1] [2] [3] [4]

Documentation updates:

• Updates documentation to reflect the switch from Highlight.js to Shiki, including changes in docs/content/pages.md and docs/customize.md. [1] [2]

Versioning and metadata:

• Updates the project version and site subtitle to 0.1.2-beta.1 in both package.json and _data/site.json. [1] [2]

---

Motivation behind this change

Why Shiki?

Aspect	highlight.js	Shiki
Rendering	Client-side	Build-time
Bundle	~38.4 kB CDN	0KB client JS
FOUC	Flash of unstyled code	None
Accuracy	Basic tokenization	VS Code-level (TextMate)
Dark mode	Manual re-highlight	CSS variables (automatic)

Some visual comparison between those two approaches

Highlight.js	Shiki

Nunjuck syntax highlighting is suppporting now with Shiki

Highlight.js	Shiki

[hunvreus]

I've had a quick look and adjusted a few things.

• I'm not sure I get the style="--shiki-light:#1f2328;--shiki-dark:#e6edf3;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0d1117" that gets added automatically. Where is it coming from?
• This doesn't seem to solve the issue with 1Password overriding the syntax highlighting, right?

[brodienguyen]

I've had a quick look and adjusted a few things.

* I'm not sure I get the `style="--shiki-light:#1f2328;--shiki-dark:#e6edf3;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0d1117"` that gets added automatically. Where is it coming from?

* This doesn't seem to solve the issue with 1Password overriding the syntax highlighting, right?

1. Inline style concern: The inline style attributes with --shiki-light, --shiki-dark, --shiki-light-bg, and --shiki-dark-bg CSS custom properties are automatically generated by Shiki

In the .eleventy.js (lines 41-56):

 const shiki = await Shiki({
   themes: {
     light: "github-light-default",
     dark: "github-dark-default",
   },
   defaultColor: false,  // ← This is the key setting
   // ...
});

When we configure Shiki with multiple themes and set defaultColor: false:

• Shiki renders both themes simultaneously - Instead of picking one theme, it embeds both color values as CSS custom properties on each token .
• Inline styles on every token - Each syntax-highlighted token gets:

 --shiki-light: #XXXXXX # (color from github-light-default)
 --shiki-dark: #XXXXXX # (color from github-dark-default)
 --shiki-light-bg
 --shiki-dark-bg

• CSS toggles visibility - Then src/css/custom.css then uses these variables

2. 1Password overriding the syntax highlight issue: It doesn't solve the issue with 1Password overriding, the intention to move syntax highlighting as a part of the build process so it helps to reduce the run-time processing.