You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
You can choose to enable only certain features, or none at all. Giving you the flexibility to use code blocks how you need in your app.
42
+
`indentLineWithTab:` Whether the Tab key should indent lines, or not be handled by the code block specially. Defaults to `true`.
43
+
44
+
`defaultLanguage:` The syntax highlighting default language for code blocks which are created/inserted without a set language, which is `text` by default (no syntax highlighting).
45
+
46
+
`supportedLanguages:` The syntax highlighting languages supported by the code block, which is an empty array by default.
48
47
49
-
## Block Shape
48
+
`createHighlighter:` The [Shiki highliter](https://shiki.style/guide/load-theme) to use for syntax highlighting.
50
49
51
-
This describes the shape of a code block in BlockNote.
50
+
BlockNote also provides a generic set of options for syntax highlighting in the `@blocknote/code-block` package, which support a wide range of languages:
This will extend the default schema with a custom `codeBlock` that includes options from `@blocknote/code-block`, enabling syntax highlighting.
94
-
95
-
### Custom Themes & Languages
96
-
97
-
To configure a code block highlighting theme and language, you can again extend the editor's default schema with a new `codeBlock`.
75
+
`language:` The syntax highlighting language to use. Defaults to `text`, which has no highlighting.
98
76
99
-
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.
77
+
## Custom Syntax Highlighting
100
78
101
-
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.
79
+
To create your own syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create one for your chosen languages and themes.
102
80
103
-
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:
81
+
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:
Copy file name to clipboardExpand all lines: docs/content/docs/features/blocks/embeds.mdx
+27-5Lines changed: 27 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,8 +10,6 @@ Embeds are a way to display content from external sources in your documents. Blo
10
10
11
11
## File
12
12
13
-
A file block is a block that displays a file.
14
-
15
13
**Type & Props**
16
14
17
15
```ts
@@ -36,7 +34,15 @@ type FileBlock = {
36
34
37
35
## Image
38
36
39
-
An image block is a block that displays an image.
37
+
**Configuration Options**
38
+
39
+
```ts
40
+
typeImageBlockOptions= {
41
+
icon?:string;
42
+
};
43
+
```
44
+
45
+
`icon:` The HTML string for an icon SVG. If no URL is given, the image block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button.
40
46
41
47
**Type & Props**
42
48
@@ -64,7 +70,15 @@ type ImageBlock = {
64
70
65
71
## Video
66
72
67
-
A video block is a block that displays a video.
73
+
**Configuration Options**
74
+
75
+
```ts
76
+
typeVideoBlockOptions= {
77
+
icon?:string;
78
+
};
79
+
```
80
+
81
+
`icon:` The HTML string for an icon SVG. If no URL is given, the video block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button.
68
82
69
83
**Type & Props**
70
84
@@ -96,7 +110,15 @@ type VideoBlock = {
96
110
97
111
## Audio
98
112
99
-
An audio block is a block that displays an audio file.
113
+
**Configuration Options**
114
+
115
+
```ts
116
+
typeAudioBlockOptions= {
117
+
icon?:string;
118
+
};
119
+
```
120
+
121
+
`icon:` The HTML string for an icon SVG. If no URL is given, the audio block displays a button to add one using a link or file, and the provided SVG replaces the generic file icon in that button.
Copy file name to clipboardExpand all lines: docs/content/docs/features/blocks/index.mdx
+33-1Lines changed: 33 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ The demo below showcases each of BlockNote's built-in block and inline content t
12
12
13
13
<Examplename="basic/default-blocks" />
14
14
15
-
###Default Block Properties
15
+
## Default Block Properties
16
16
17
17
There are some default block props that BlockNote uses for the built-in blocks:
18
18
@@ -36,6 +36,38 @@ type DefaultProps = {
36
36
};
37
37
```
38
38
39
+
## Configuring Default Blocks
40
+
41
+
Some default blocks can be configured with options. For example, headings can be configured to have different available levels:
42
+
43
+
```ts
44
+
// Creates a new instance of the default heading block.
45
+
const heading =createHeadingBlockSpec({
46
+
// Sets the block to support only heading levels 1-3.
47
+
levels: [1, 2, 3],
48
+
});
49
+
```
50
+
51
+
Each default block type can be instantiated using their respective `create...BlockSpec` function. If the block can be configured, i.e. if it has options, you can pass them in an object to the function. To see which options each block type supports, read on to the next pages.
52
+
53
+
To add your configured block to the editor, you must pass in a [custom schema](/docs/features/custom-schemas) with it. The simplest way to do this is by [extending the default schema](/docs/features/custom-schemas#extending-an-existing-schema):
54
+
55
+
```ts
56
+
const editor =useCreateBlockNote({
57
+
// Creates a default schema and extends it with the configured heading block.
58
+
schema: BlockNoteSchema.create().extend({
59
+
blockSpecs: {
60
+
heading: createHeadingBlockSpec({
61
+
// Sets the allowed heading levels.
62
+
levels: [1, 2, 3],
63
+
}),
64
+
},
65
+
}),
66
+
});
67
+
```
68
+
69
+
You can see this in action in a working demo [here](/examples/custom-schema/configuring-blocks).
Copy file name to clipboardExpand all lines: docs/content/docs/features/blocks/typography.mdx
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,6 +24,22 @@ type ParagraphBlock = {
24
24
25
25
## Heading
26
26
27
+
**Configuration Options**
28
+
29
+
```typescript
30
+
typeHeadingBlockOptions=Partial<{
31
+
defaultLevel?:number;
32
+
levels?:number[];
33
+
allowToggleHeadings?:boolean;
34
+
}>;
35
+
```
36
+
37
+
`defaultLevel:` The default level for headings which are created/inserted without a set level, which is `1` by default.
38
+
39
+
`levels:` The heading levels that the block supports, or '1'-'6' by default.
40
+
41
+
`allowToggleHeadings:` Whether toggle headings should be supported, `true` by default. Toggle headings have a button which toggles between hiding and showing the block's children.
0 commit comments