# code-block-pro/1.28.0/src/hooks/useTheme.ts

Code Block Pro – Beautiful Syntax Highlighting, version 1.28.0. 69 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/hooks/useTheme.ts
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.28.0/raw/src/hooks/useTheme.ts
- Modified: 2026-04-12T13:22:22+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.28.0/code/src/hooks/useTheme.ts#L10-L20`.

```typescript
import { useEffect, useState } from '@wordpress/element';
import { applyFilters } from '@wordpress/hooks';
import { getHighlighter, setCDN, setWasm, type Theme } from 'shiki';
import useSWRImmutable from 'swr/immutable';
import defaultThemes from '../defaultThemes.json';
import type { Lang, ThemeOption } from '../types';
import { getEditorLanguage } from '../util/languages';

type Params = {
	theme: Theme;
	lang: Lang | 'ansi';
	ready?: boolean;
};

const fetcher = ({ theme, lang, ready }: Params) => {
	if (!ready) throw new Error();
	const themeFiltered = applyFilters(
		'blocks.codeBlockPro.theme',
		theme,
	) as Theme;
	// If the theme has an alias, use that instead
	// i.e. it was renamed upstream
	const themeAlias = (
		defaultThemes as Record<
			string,
			{ name: string; priority?: boolean; alias?: string }
		>
	)?.[themeFiltered]?.alias as Theme;

	return getHighlighter({
		langs: lang === 'plaintext' ? [] : [getEditorLanguage(lang)],
		theme: themeAlias ?? themeFiltered,
	});
};
let once = false;

export const useTheme = ({ theme, lang, ready = true }: Params) => {
	const [wasmLoaded, setWasmFileLoaded] = useState(false);
	const themes = applyFilters(
		'blocks.codeBlockPro.themes',
		defaultThemes,
	) as ThemeOption;
	if (!once) {
		once = true;
		const assetDir = `${window.codeBlockPro?.pluginUrl}build/shiki/`;
		setCDN(applyFilters('blocks.codeBlockPro.assetDir', assetDir) as string);
	}
	if (themes[theme]?.custom) theme = 'css-variables';
	const { data: highlighter, error } = useSWRImmutable(
		{ theme, lang, ready: ready && wasmLoaded },
		fetcher,
	);
	useEffect(() => {
		const assetDir = `${window.codeBlockPro?.pluginUrl}build/shiki/`;
		fetch(`${assetDir}dist/onig.wasm`)
			.then((res) => res.arrayBuffer())
			.then((wasmBuffer) => {
				setWasm(wasmBuffer);
				setWasmFileLoaded(true);
			});
	}, []);

	return {
		highlighter,
		error,
		loading: (!highlighter && !error) || !wasmLoaded,
	};
};

```