Docs
Advanced
Code Block Syntax Highlighting

Code Block Syntax Highlighting

To enable code block syntax highlighting, you can use the codeBlock option in the useCreateBlockNote hook. This is excluded by default to reduce bundle size.

We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users.

To use it, you can do the following:

npm install @blocknote/code-block

And then you can use it like this:

import { codeBlock } from "@blocknote/code-block";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    codeBlock,
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

See the code block example for a more detailed example.

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
// This packages some of the most used languages in on-demand bundle
import { codeBlock } from "@blocknote/code-block";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    codeBlock,
    initialContent: [
      {
        type: "codeBlock",
        props: {
          language: "typescript",
        },
        content: [
          {
            type: "text",
            text: "const x = 3 * 4;",
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
      },
      {
        type: "heading",
        props: {
          textColor: "default",
          backgroundColor: "default",
          textAlignment: "left",
          level: 3,
        },
        content: [
          {
            type: "text",
            text: 'Click on "Typescript" above to see the different supported languages',
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Custom Themes & Languages

To configure a code block highlighting theme and language, you can use the codeBlock option in the useCreateBlockNote hook.

This allows you to configure a shiki (opens in a new tab) highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use.

To create a syntax highlighter, you can use the shiki-codegen (opens in a new tab) CLI for generating the code to create a syntax highlighter for your languages and themes.

For example to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command:

npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts

This will generate a shiki.bundle.ts file that you can use to create a syntax highlighter for your editor.

Like this:

import { createHighlighter } from "./shiki.bundle.js";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    codeBlock: {
      indentLineWithTab: true,
      defaultLanguage: "typescript",
      supportedLanguages: {
        typescript: {
          name: "TypeScript",
          aliases: ["ts"],
        },
      },
      createHighlighter: () =>
        createHighlighter({
          themes: ["light-plus", "dark-plus"],
          langs: [],
        }),
    },
  });
 
  return <BlockNoteView editor={editor} />;
}

See the custom code block example for a more detailed example.

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
// Bundle created from `npx shiki-codegen --langs typescript,javascript,react --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts`
import { createHighlighter } from "./shiki.bundle.js";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    codeBlock: {
      indentLineWithTab: true,
      defaultLanguage: "typescript",
      supportedLanguages: {
        typescript: {
          name: "TypeScript",
          aliases: ["ts"],
        },
        javascript: {
          name: "JavaScript",
          aliases: ["js"],
        },
        vue: {
          name: "Vue",
        },
      },
      // This creates a highlighter, it can be asynchronous to load it afterwards
      createHighlighter: () =>
        createHighlighter({
          themes: ["dark-plus", "light-plus"],
          langs: [],
        }),
    },
    initialContent: [
      {
        type: "codeBlock",
        props: {
          language: "typescript",
        },
        content: [
          {
            type: "text",
            text: "const x = 3 * 4;",
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
      },
      {
        type: "heading",
        props: {
          textColor: "default",
          backgroundColor: "default",
          textAlignment: "left",
          level: 3,
        },
        content: [
          {
            type: "text",
            text: 'Click on "Typescript" above to see the different supported languages',
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}
BlockNote with ShadCN and TailwindGrid Suggestion Menus