Skip to content

Commit e9a4636

Browse files
authored
docs: update code block docs (#2505)
1 parent f150e1e commit e9a4636

File tree

1 file changed

+17
-15
lines changed

1 file changed

+17
-15
lines changed

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ To create your own syntax highlighter, you can use the [shiki-codegen](https://s
8080
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:
8181

8282
```bash
83-
npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts
83+
npx shiki-codegen --langs javascript,typescript,vue --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts
8484
```
8585

8686
This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor.
@@ -93,21 +93,23 @@ import { createHighlighter } from "./shiki.bundle.js";
9393
export default function App() {
9494
const editor = useCreateBlockNote({
9595
schema: BlockNoteSchema.create().extend({
96-
codeBlock: createCodeBlockSpec({
97-
indentLineWithTab: true,
98-
defaultLanguage: "typescript",
99-
supportedLanguages: {
100-
typescript: {
101-
name: "TypeScript",
102-
aliases: ["ts"],
96+
blockSpecs: {
97+
codeBlock: createCodeBlockSpec({
98+
indentLineWithTab: true,
99+
defaultLanguage: "typescript",
100+
supportedLanguages: {
101+
typescript: {
102+
name: "TypeScript",
103+
aliases: ["ts"],
104+
},
103105
},
104-
},
105-
createHighlighter: () =>
106-
createHighlighter({
107-
themes: ["light-plus", "dark-plus"],
108-
langs: [],
109-
}),
110-
}),
106+
createHighlighter: () =>
107+
createHighlighter({
108+
themes: ["light-plus", "dark-plus"],
109+
langs: [],
110+
}),
111+
}),
112+
},
111113
}),
112114
});
113115

0 commit comments

Comments
 (0)