[@mantine/code-highlight] Language `${language}` ${reason},

Error message

[@mantine/code-highlight] Language `${language}` ${reason}, code is rendered as plain text.

What it means

A console.warn emitted by @mantine/code-highlight's shiki adapter when a requested language cannot be loaded, so the code is rendered as plain (unhighlighted) text. The hook/adapter degrades gracefully; rendering still works. The warning fires once per language per session (tracked in warnedLanguages) and is suppressed in production builds via getEnv().

Source

Thrown at packages/@mantine/code-highlight/src/CodeHighlightProvider/adapters/shiki-adapter.ts:61

  }

  return ctx.getLoadedLanguages().includes(language);
}

export const createShikiAdapter = (
  loadShiki: () => Promise<any>,
  { forceColorScheme, resolveLanguage }: CreateShikiAdapterOptions = {}
): CodeHighlightAdapter => {
  const warnedLanguages = new Set<string>();

  const warnUnavailableLanguage = (language: string, reason: string) => {
    if (getEnv() === 'production' || warnedLanguages.has(language)) {
      return;
    }

    warnedLanguages.add(language);
    // eslint-disable-next-line no-console
    console.warn(
      `[@mantine/code-highlight] Language \`${language}\` ${reason}, code is rendered as plain text.`
    );
  };

  return {
    loadContext: loadShiki,

    loadLanguage: resolveLanguage
      ? (ctx, language) => {
          if (isLanguageAvailable(ctx, language)) {
            return undefined;
          }

          const onLoadError = (error: any) => {
            warnUnavailableLanguage(language, 'could not be loaded by the highlighter');
            throw error;
          };

View on GitHub (pinned to 8a284e2c2c)

Solutions

Fix the language prop value — check the exact string against shiki's supported languages (e.g. 'typescript', 'bash', not 'ts-script')
If using a custom/less-common language, register its grammar with your shiki instance before rendering
If the grammar fetch failed (offline/CDN block), ensure network access to the shiki language resources or bundle them locally
Verify your @mantine/code-highlight version's shiki dependency supports the language after upgrades

Example fix

// before
<CodeHighlight language="javscript" code={code} />

// after
<CodeHighlight language="javascript" code={code} />

Defensive patterns

Strategy: validation

Validate before calling

import { shikiBundledLanguages } from 'shiki';

const isSupportedLanguage = (lang: string): boolean =>
  lang in shikiBundledLanguages;

// before render
const safeLang = isSupportedLanguage(language) ? language : 'txt';

Type guard

const isSupportedLanguage = (lang: string, bundled: Record<string, unknown>): lang is string =>
  Object.prototype.hasOwnProperty.call(bundled, lang);

Try / catch

// The adapter catches load errors internally; guard at the call site instead:
<CodeHighlight
  language={isSupportedLanguage(language) ? language : 'plaintext'}
  code={code}
/>

Prevention

Restrict the language prop to a union type of supported languages instead of string
Centralize language constants and reuse them instead of inline strings
Pin shiki-compatible versions when upgrading @mantine/code-highlight
Test render all supported languages in CI to catch typos/regressions

When it happens

Trigger: Passing a `language` prop to CodeHighlight that shiki does not have registered or cannot fetch — e.g. a typo ('javscript'), an unsupported/custom language, or a dynamic import of the shiki language bundle failing (network error, offline). Surfaced from onLoadError and during adapter creation.

Common situations: Typos in the language prop; using a niche language not included in the bundled shiki grammar set; CDN/offline environments where the language grammar fetch fails; upgrading @mantine/code-highlight where the shiki version and its language list changed; forgetting to register a custom language with the shiki instance.

Related errors

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/4045de3063cae47d. Report an issue: GitHub.