Code Highlighting

Methanol utilizes Starry Night to provide robust syntax highlighting (integrated via rehype-starry-night). This feature is enabled by default.

Enabling and Disabling

Highlighting is enabled by default. To explicitly enable or customize it, add starryNight to your methanol.config.* file:

// methanol.config.js
export default () => ({
	starryNight: true
})

To explicitly disable the feature:

// methanol.config.js
export default () => ({
	starryNight: false
})

You can also toggle highlighting per-execution via the CLI:

npx methanol build --highlight
npx methanol build --no-highlight

Per-page Configuration

Frontmatter settings take priority and can override global configurations for individual pages:

---
starryNight: true
---

Standalone Highlighting Integrations

If you prefer an alternative highlighting solution:

  1. Disable the built-in Starry Night support (starryNight: false).
  2. Integrate your preferred rehype plugin within the mdx configuration section.
export default () => ({
	starryNight: false,
	mdx: () => ({
		rehypePlugins: [/* your custom highlighting plugin */]
	})
})

Styles and Appearance

Methanol does not automatically inject CSS for code highlighting. The visual appearance is managed by the active theme, or can be customized by providing your own stylesheet.

Language Loading

Methanol automatically loads Starry Night grammars that correspond to the fenced languages it finds in your content. You generally don’t need to configure anything.

Only configure starryNight.grammars when:

Extending Language Support

To override or extend the grammar set, include explicit grammars in starryNight.grammars:

import sourceMDX from '@wooorm/starry-night/source.mdx'

export default () => ({
	starryNight: {
		grammars: [sourceMDX]
	}
})

Note: Ensure the @wooorm/starry-night package is installed in your project to load these grammars.