Code Block Syntax Highlighting
To enable code block syntax highlighting, you can extend the editor's default schema with a new codeBlock, which you can pass options into when creating. By passing the default options from @blocknote/code-block, you can enable syntax highlighting. This is excluded by default to reduce bundle size.
Relevant Docs:
import { BlockNoteSchema, createCodeBlockSpec } from "@blocknote/core";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 bundleimport { codeBlockOptions } from "@blocknote/code-block";export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ schema: BlockNoteSchema.create().extend({ blockSpecs: { codeBlock: createCodeBlockSpec(codeBlockOptions), }, }), 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} />;}