Skip to content

Commit c36bb52

Browse files
nperez0111nperez0111
authored
feat: remove shiki dep, add new @blocknote/code-block package for slim shiki build (#1519)
This is a breaking change for syntax highlighting of code blocks, but removes any dependency on shiki languages. Now, to enable syntax highlighting for code blocks, you can use the new `codeBlock` option to customize your own shiki themes and languages with a highlighter you provide. To make this as easy as possible, we've introduced an optional package `@blocknote/code-block` which will provide the most commonly used languages out of the box, in the most efficient way possible (dynamically loaded when the language is selected).
1 parent a0f5191 commit c36bb52

File tree

55 files changed

+1482
-296
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1482
-296
lines changed

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"@blocknote/ariakit": "^0.26.0",
1313
"@blocknote/core": "^0.26.0",
14+
"@blocknote/code-block": "^0.26.0",
1415
"@blocknote/mantine": "^0.26.0",
1516
"@blocknote/react": "^0.26.0",
1617
"@blocknote/shadcn": "^0.26.0",

‎docs/pages/docs/advanced/code-blocks.mdx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Code Block Syntax Highlighting
3+
description: This section explains how to add syntax highlighting to code blocks.
4+
imageTitle: Code Block Syntax Highlighting
5+
---
6+
7+
import { Example } from "@/components/example";
8+
9+
# Code Block Syntax Highlighting
10+
11+
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.
12+
13+
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.
14+
15+
To use it, you can do the following:
16+
17+
```sh
18+
npm install @blocknote/code-block
19+
```
20+
21+
And then you can use it like this:
22+
23+
```tsx
24+
import { codeBlock } from "@blocknote/code-block";
25+
26+
export default function App() {
27+
// Creates a new editor instance.
28+
const editor = useCreateBlockNote({
29+
codeBlock,
30+
});
31+
32+
// Renders the editor instance using a React component.
33+
return <BlockNoteView editor={editor} />;
34+
}
35+
```
36+
37+
See the code block example for a more detailed example.
38+
39+
<Example name="theming/code-block" />
40+
41+
## Custom Themes & Languages
42+
43+
To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook.
44+
45+
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.
46+
47+
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.
48+
49+
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:
50+
51+
```bash
52+
npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts
53+
```
54+
55+
This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor.
56+
57+
Like this:
58+
59+
```ts
60+
import { createHighlighter } from "./shiki.bundle.js";
61+
62+
export default function App() {
63+
// Creates a new editor instance.
64+
const editor = useCreateBlockNote({
65+
codeBlock: {
66+
indentLineWithTab: true,
67+
defaultLanguage: "typescript",
68+
supportedLanguages: {
69+
typescript: {
70+
name: "TypeScript",
71+
aliases: ["ts"],
72+
},
73+
},
74+
createHighlighter: () =>
75+
createHighlighter({
76+
themes: ["light-plus", "dark-plus"],
77+
langs: [],
78+
}),
79+
},
80+
});
81+
82+
return <BlockNoteView editor={editor} />;
83+
}
84+
```
85+
86+
See the custom code block example for a more detailed example.
87+
88+
<Example name="theming/custom-code-block" />

‎examples/01-basic/01-minimal/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useCreateBlockNote } from "@blocknote/react";
55

66
export default function App() {
77
// Creates a new editor instance.
8-
const editor = useCreateBlockNote({});
8+
const editor = useCreateBlockNote();
99

1010
// Renders the editor instance using a React component.
1111
return <BlockNoteView editor={editor} />;

‎examples/04-theming/06-code-block/.bnexample.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "nperez0111",
5+
"tags": ["Basic"]
6+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import "@blocknote/core/fonts/inter.css";
2+
import { BlockNoteView } from "@blocknote/mantine";
3+
import "@blocknote/mantine/style.css";
4+
import { useCreateBlockNote } from "@blocknote/react";
5+
// This packages some of the most used languages in on-demand bundle
6+
import { codeBlock } from "@blocknote/code-block";
7+
8+
export default function App() {
9+
// Creates a new editor instance.
10+
const editor = useCreateBlockNote({
11+
codeBlock,
12+
initialContent: [
13+
{
14+
type: "codeBlock",
15+
props: {
16+
language: "typescript",
17+
},
18+
content: [
19+
{
20+
type: "text",
21+
text: "const x = 3 * 4;",
22+
styles: {},
23+
},
24+
],
25+
},
26+
{
27+
type: "paragraph",
28+
},
29+
{
30+
type: "heading",
31+
props: {
32+
textColor: "default",
33+
backgroundColor: "default",
34+
textAlignment: "left",
35+
level: 3,
36+
},
37+
content: [
38+
{
39+
type: "text",
40+
text: 'Click on "Typescript" above to see the different supported languages',
41+
styles: {},
42+
},
43+
],
44+
},
45+
{
46+
type: "paragraph",
47+
},
48+
],
49+
});
50+
51+
// Renders the editor instance using a React component.
52+
return <BlockNoteView editor={editor} />;
53+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Code Block Syntax Highlighting
2+
3+
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.
4+
5+
**Relevant Docs:**
6+
7+
- [Code Block Syntax Highlighting](/docs/advanced/code-blocks)
8+
- [Editor Setup](/docs/editor-basics/setup)

‎examples/04-theming/06-code-block/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<script>
4+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
5+
</script>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Code Block Syntax Highlighting</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/04-theming/06-code-block/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./App";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/04-theming/06-code-block/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "@blocknote/example-code-block",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"private": true,
5+
"version": "0.12.4",
6+
"scripts": {
7+
"start": "vite",
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"lint": "eslint . --max-warnings 0"
12+
},
13+
"dependencies": {
14+
"@blocknote/core": "latest",
15+
"@blocknote/react": "latest",
16+
"@blocknote/ariakit": "latest",
17+
"@blocknote/mantine": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1"
21+
},
22+
"devDependencies": {
23+
"@types/react": "^18.0.25",
24+
"@types/react-dom": "^18.0.9",
25+
"@vitejs/plugin-react": "^4.3.1",
26+
"eslint": "^8.10.0",
27+
"vite": "^5.3.4"
28+
},
29+
"eslintConfig": {
30+
"extends": [
31+
"../../../.eslintrc.js"
32+
]
33+
},
34+
"eslintIgnore": [
35+
"dist"
36+
]
37+
}

‎examples/04-theming/06-code-block/tsconfig.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
3+
"compilerOptions": {
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"lib": [
7+
"DOM",
8+
"DOM.Iterable",
9+
"ESNext"
10+
],
11+
"allowJs": false,
12+
"skipLibCheck": true,
13+
"esModuleInterop": false,
14+
"allowSyntheticDefaultImports": true,
15+
"strict": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"module": "ESNext",
18+
"moduleResolution": "bundler",
19+
"resolveJsonModule": true,
20+
"isolatedModules": true,
21+
"noEmit": true,
22+
"jsx": "react-jsx",
23+
"composite": true
24+
},
25+
"include": [
26+
"."
27+
],
28+
"__ADD_FOR_LOCAL_DEV_references": [
29+
{
30+
"path": "../../../packages/core/"
31+
},
32+
{
33+
"path": "../../../packages/react/"
34+
}
35+
]
36+
}

0 commit comments

Comments
 (0)