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 bundle
import { 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} />;
}