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
Copy file name to clipboardExpand all lines: custom/highlighters.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Highlighters
2
2
3
-
Slidev comes with two syntax highlighter for you to choose from:
3
+
Slidev comes with three syntax highlighters for you to choose from:
4
4
5
5
-[Prism](https://prismjs.com/)
6
6
-[Shiki](https://github.com/shikijs/shiki)
@@ -10,7 +10,7 @@ Slidev comes with two syntax highlighter for you to choose from:
10
10
11
11
**Shiki**, on the other hand, is a TextMate grammar-powered syntax highlighter. It generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with [a bunch of built-in themes](https://github.com/shikijs/shiki/blob/master/docs/themes.md). The downside of Shiki is that it also requires TextMate themes (compatible with VS Code theme) to do the highlighting, which can be a bit harder to customize.
12
12
13
-
**Shikiji** is a ESM rewrite of Shiki bringing many improvements and new features. You could have [AST-based transformers](https://github.com/antfu/shikiji#hast-transformers) to customize how the code is rendered. And the [TwoSlash](#twoslash) support is also built-in.
13
+
**Shikiji** is an ESM rewrite of Shiki bringing many improvements and new features. You could have [AST-based transformers](https://github.com/antfu/shikiji#hast-transformers) to customize how the code is rendered. And the [TwoSlash](#twoslash) support is also built-in.
14
14
15
15
Slidev themes usually support both Prism and Shiki, but depending on the theme you are using, it might only support one of them.
16
16
@@ -32,7 +32,7 @@ highlighter: shikiji
32
32
33
33
This feature is only available when you set `highlighter` to `shikiji`.
34
34
35
-
[TwoSlash](https://www.typescriptlang.org/dev/twoslash/) is a powerful tool for rendering TypeScript code blocks with type informations on hover or inlined. It's quite useful for preapring slides for JavaScript/TypeScriptrelated topics.
35
+
[TwoSlash](https://www.typescriptlang.org/dev/twoslash/) is a powerful tool for rendering TypeScript code blocks with type information on hover or inlined. It's quite useful for preparing slides for JavaScript/TypeScript-related topics.
36
36
37
37
To use it, you can add `twoslash` to the code block's language identifier:
38
38
@@ -42,11 +42,11 @@ console.log('hello')
42
42
```
43
43
~~~
44
44
45
-
And example of TwoSlash enabled code snippet [can be found here](https://antfu.me/posts/shikiji-twoslash).
45
+
An example of TwoSlash enabled code snippet [can be found here](https://antfu.me/posts/shikiji-twoslash).
46
46
47
47
## Configure Prism
48
48
49
-
To configure your Prism, you can just import the theme css or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
49
+
To configure your Prism, you can just import the theme CSS or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
Refer to [Shikiji's docs](https://github.com/antfu/shikiji) for all available options.
114
114
115
-
> It make it easier for the community to adapt, when no `shikiji.ts`it presented, we will look for `shiki.ts` and try to convert it to Shikiji options.
115
+
> It makes it easier for the community to adapt, when no `shikiji.ts`is presented, we will look for `shiki.ts` and try to convert it to Shikiji options.
0 commit comments