Updated code block docs & package export name

Author: matthewlipski

docs/content/docs/features/blocks/code-blocks.mdx

@@ -20,25 +20,27 @@ Code blocks by default are a simple way to display code. But, BlockNote also sup
   experience easy to use and reduce bundle size.
 </Callout>
 
-You can enable more advanced features by passing the `codeBlock` option when creating the editor.
+You can enable more advanced features by extending the editor's default schema with a new `codeBlock`, which you can pass options into when creating. For more on extending the editor schema, see [Custom Schemas](/docs/features/custom-schemas).
 
 ```ts
 const editor = new BlockNoteEditor({
-  codeBlock: {
-    indentLineWithTab: true,
-    defaultLanguage: "typescript",
-    supportedLanguages: {
-      typescript: {
-        name: "TypeScript",
-        aliases: ["ts"],
+  schema: BlockNoteSchema.create().extend({
+    codeBlock: createCodeBlockSpec({
+      indentLineWithTab: true,
+      defaultLanguage: "typescript",
+      supportedLanguages: {
+        typescript: {
+          name: "TypeScript",
+          aliases: ["ts"],
+        },
       },
-    },
-    createHighlighter: () =>
-      createHighlighter({
-        themes: ["light-plus", "dark-plus"],
-        langs: [],
-      }),
-  },
+      createHighlighter: () =>
+        createHighlighter({
+          themes: ["light-plus", "dark-plus"],
+          langs: [],
+        }),
+    }),
+  }),
 });
 ```
 
@@ -64,7 +66,7 @@ type CodeBlock = {
 
 ### Basic Setup
 
-To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+To enable code block syntax highlighting, you can extend the editor's default schema with a new `codeBlock`.
 
 First, install the package:
 
@@ -75,20 +77,24 @@ npm install @blocknote/code-block
 Then use it like this:
 
 ```tsx
-import { codeBlock } from "@blocknote/code-block";
+import { codeBlockOptions } from "@blocknote/code-block";
 
 export default function App() {
   const editor = useCreateBlockNote({
-    codeBlock,
+    schema: BlockNoteSchema.create().extend({
+      codeBlock: createCodeBlockSpec(codeBlockOptions),
+    }),
   });
 
   return <BlockNoteView editor={editor} />;
 }
 ```
 
+This will extend the default schema with a custom `codeBlock` that includes options from `@blocknote/code-block`, enabling syntax highlighting.
+
 ### Custom Themes & Languages
 
-To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+To configure a code block highlighting theme and language, you can again extend the editor's default schema with a new `codeBlock`.
 
 This allows you to configure a [shiki](https://shiki.style) highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use.
 
@@ -109,21 +115,23 @@ import { createHighlighter } from "./shiki.bundle.js";
 
 export default function App() {
   const editor = useCreateBlockNote({
-    codeBlock: {
-      indentLineWithTab: true,
-      defaultLanguage: "typescript",
-      supportedLanguages: {
-        typescript: {
-          name: "TypeScript",
-          aliases: ["ts"],
+    schema: BlockNoteSchema.create().extend({
+      codeBlock: createCodeBlockSpec({
+        indentLineWithTab: true,
+        defaultLanguage: "typescript",
+        supportedLanguages: {
+          typescript: {
+            name: "TypeScript",
+            aliases: ["ts"],
+          },
         },
-      },
-      createHighlighter: () =>
-        createHighlighter({
-          themes: ["light-plus", "dark-plus"],
-          langs: [],
-        }),
-    },
+        createHighlighter: () =>
+          createHighlighter({
+            themes: ["light-plus", "dark-plus"],
+            langs: [],
+          }),
+      }),
+    }),
   });
 
   return <BlockNoteView editor={editor} />;

examples/04-theming/06-code-block/README.md

@@ -1,8 +1,9 @@
 # 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.
+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:**
 
 - [Code Block Syntax Highlighting](/docs/features/blocks/code-blocks)
 - [Editor Setup](/docs/getting-started/editor-setup)
+- [Custom Schema](/docs/features/custom-schemas)

examples/04-theming/06-code-block/src/App.tsx

@@ -4,14 +4,14 @@ 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";
+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(codeBlock),
+        codeBlock: createCodeBlockSpec(codeBlockOptions),
       },
     }),
     initialContent: [

examples/04-theming/07-custom-code-block/README.md

@@ -1,49 +1,11 @@
 # Custom Code Block Theme & Language
 
-To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
+To configure a code block highlighting theme and language, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. You can then use a shiki highlighter to add custom syntax highlighting.
 
-This allows you to configure a shiki 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](https://shiki.style/packages/codegen) 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:
-
-```bash
-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:
-
-```ts
-import { createHighlighter } from "./shiki.bundle";
-
-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} />;
-}
-```
+First use the [shiki-codegen](https://shiki.style/packages/codegen) CLI to create a `shiki.bundle.ts` file. You can then pass this file into the `codeBlock` options when creating it.
 
 **Relevant Docs:**
 
 - [Code Blocks](/docs/features/blocks/code-blocks)
 - [shiki-codegen](https://shiki.style/packages/codegen)
+- [Custom Schema](/docs/features/custom-schemas)

packages/code-block/src/index.test.ts

@@ -1,17 +1,17 @@
 import { describe, expect, it } from "vitest";
-import { codeBlock } from "./index.js";
+import { codeBlockOptions } from "./index.js";
 
 describe("codeBlock", () => {
   it("should exist", () => {
-    expect(codeBlock).toBeDefined();
+    expect(codeBlockOptions).toBeDefined();
   });
   it("should have defaultLanguage", () => {
-    expect(codeBlock.defaultLanguage).toBeDefined();
+    expect(codeBlockOptions.defaultLanguage).toBeDefined();
   });
   it("should have supportedLanguages", () => {
-    expect(codeBlock.supportedLanguages).toBeDefined();
+    expect(codeBlockOptions.supportedLanguages).toBeDefined();
   });
   it("should have createHighlighter", () => {
-    expect(codeBlock.createHighlighter).toBeDefined();
+    expect(codeBlockOptions.createHighlighter).toBeDefined();
   });
 });

packages/code-block/src/index.ts

@@ -1,7 +1,7 @@
 import type { CodeBlockOptions } from "@blocknote/core";
 import { createHighlighter } from "./shiki.bundle.js";
 
-export const codeBlock = {
+export const codeBlockOptions = {
   defaultLanguage: "javascript",
   supportedLanguages: {
     text: {