Skip to content
@staticbolt/docs

Expressive Code

Code blocks are rendered by Expressive Code. The theme ships the options, a cached rehype plugin, and a plugin that persists the cache.

rehypeExpressiveCodeOptions

Exported from @staticbolt/docs/ec-config. Themes plastic and kanagawa-lotus, colors bound to the theme’s CSS variables, and these plugins:

  • line numbers, off by default, showLineNumbers turns them on per block
  • file icons in the frame title
  • collapsible sections, collapse={3-10}
  • the theme’s collapsible plugin, see below

Spread and override for a different setup:

import { rehypeExpressiveCodeOptions } from "@staticbolt/docs/ec-config";


const options = { ...rehypeExpressiveCodeOptions, themes: ["github-light", "github-dark"] };

cachedRehypeExpressiveCode

rehype-expressive-code behind a persistent cache keyed by code, language, and meta. Register it in coreMarkdownPlugin in place of the plain one:

plugins.coreMarkdownPlugin({
  rehypePlugins: [[theme.cachedRehypeExpressiveCode, rehypeExpressiveCodeOptions]],
});

ecCachePlugin

Writes the cache to node_modules/.cache/staticbolt-docs/ at the end of a build, so unchanged blocks skip highlighting next time.

theme.ecCachePlugin();

Collapsible blocks

Add collapsible to a fence to show the first lines with a button to expand, or collapsible=10 for a different preview length.

```ts collapsible
const first = 1;
const second = 2;
const third = 3;
const fourth = 4;
const fifth = 5;
```
const first = 1;
const second = 2;
const third = 3;
const fourth = 4;
const fifth = 5;

pluginCollapsible({ previewLines, expandButtonText, collapseButtonText }) sets the defaults, three lines and “Show code” / “Hide code”.