Hanzo
HeadlessUtilities

Shiki (Internal)

Manage the Shiki instances.

Overview

Hanzo Docs use its own Shiki factory API to manage internal Shiki instances.

You can customise it for special purposes like using fine-grained bundles, for example:

import { createShikiFactory } from '@hanzo/docs-core/highlight/shiki';

export const myShikiFactory = createShikiFactory({
  async init(options) {
    const { createHighlighter, createJavaScriptRegexEngine } = await import('shiki');

    return createHighlighter({
      langs: [],
      themes: [],
      langAlias: options?.langAlias,
      engine: createJavaScriptRegexEngine(),
    });
  },
});

Then pass it to different modules/features:

'use client';
import * as Base from '@hanzo/docs-ui/dynamic-codeblock.core';

export type DynamicCodeblockProps = Omit<Base.DynamicCodeblockProps, 'highlighter'>;

export function DynamicCodeBlock(props: DynamicCodeblockProps) {
  return <Base.DynamicCodeBlock highlighter={() => myShikiFactory.getOrInit()} {...props} />;
}

How is this guide?

Last updated on

On this page

Overview