docs: mark Prism.js support as deprecated (#1548)

README.md

@@ -79,7 +79,7 @@ For a full example, you can check the [demo](https://github.com/slidevjs/slidev/
 - [Vite](https://vitejs.dev) - An extremely fast frontend tooling
 - [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
 - [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS engine, style your slides at ease
-- [Prism](https://github.com/PrismJS/prism), [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
+- [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
 - [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
 - [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
 - [Iconify](https://iconify.design/) - Iconsets collection.

docs/.vitepress/theme/components/Environment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{ type: 'node' | 'client' }>()
+defineProps<{ type: 'node' | 'client' | 'both' }>()
 </script>
 
 <template>
@@ -10,7 +10,10 @@ defineProps<{ type: 'node' | 'client' }>()
  </summary>
 
  <div class="pt2 opacity-75">
- <span v-if="type === 'node'">
+ <span v-if="type === 'both'">
+ This setup function will run on <b>both</b> Node.js and client side. Avoid using either Node's or DOM API to avoid runtime errors.
+ </span>
+ <span v-else-if="type === 'node'">
  This setup function will only run on Node.js environment, you can have access to Node's API.
  </span>
  <span v-else>

docs/custom/highlighters.md

@@ -1,49 +1,50 @@
 # Highlighters
 
-Slidev comes with two syntax highlighters for you to choose from:
+Slidev uses [Shiki](https://github.com/shikijs/shiki) as the code highlighter. It's a TextMate grammar-powered syntax highlighter that 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://shiki.style/themes). In Slidev, we also provided the [TwoSlash](#twoslash-integration) support is also built-in.
 
-- [Prism](https://prismjs.com/)
-- [Shiki](https://github.com/shikijs/shiki)
-
-**Prism** is one of the most popular syntax highlighters. The highlighting is done by adding token classes to the code and it's colored using CSS. You can browse through their [official themes](https://github.com/PrismJS/prism-themes), or create/customize one yourself very easily using [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars).
-
-**Shiki** 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://shiki.style/themes). In Slidev, we also provided the [TwoSlash](#twoslash-integration) support is also built-in.
-
-Slidev themes usually support both Prism and Shiki, but depending on the theme you are using, it might only support one of them.
+## Configure Shiki
 
-When you have the choice, the tradeoff is basically:
+<Environment type="both" />
 
-- **Prism** for easier customization
-- **Shiki** for accurate highlighting
+Create `./setup/shiki.ts` file with the following content:
 
-Slidev uses Shiki by default since v0.47. You can switch to it by adding the following to your `slides.md`:
+```ts
+/* ./setup/shiki.ts */
+import { defineShikiSetup } from '@slidev/types'
 
-```yaml
----
-highlighter: Prism
----
+export default defineShikiSetup(() => {
+ return {
+ themes: {
+ dark: 'min-dark',
+ light: 'min-light',
+ },
+ transformers: [
+ // ...
+ ],
+ }
+})
 ```
 
-## Configure Shiki
-
-<Environment type="node" />
-
-Create `./setup/shiki.ts` file with the following content:
+If you want to add custom theme or language (TextMate grammar/themes in JSON), you can import them in the setup file:
 
 ```ts
 /* ./setup/shiki.ts */
 import { defineShikiSetup } from '@slidev/types'
+import customTheme from './customTheme.tmTheme.json'
 import customLanguage from './customLanguage.tmLanguage.json'
 
 export default defineShikiSetup(() => {
  return {
  themes: {
- dark: 'min-dark',
+ dark: customTheme,
  light: 'min-light',
  },
  langs: [
+ 'js',
+ 'typescript',
  'cpp',
  customLanguage,
+ // ...
  ],
  transformers: [
  // ...
@@ -52,12 +53,16 @@ export default defineShikiSetup(() => {
 })
 ```
 
-Refer to [Shiki's docs](https://shiki.style) for available theme names.
+Check [Built-in languages](https://shiki.style/languages) and [Built-in themes](https://shiki.style/themes), and refer to [Shiki's docs](https://shiki.style) for more details.
 
 :::info
 For now, Shiki Magic Move does not support transformers.
 :::
 
 ## Configure Prism
 
+:::warning
+Prism support is deprecated and will be removed in the future. Please consider using Shiki instead.
+:::
+
 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.

docs/guide/index.md

@@ -111,7 +111,7 @@ Slidev is made possible by combining these tools and technologies.
 - [Vite](https://vitejs.dev) - An extremely fast frontend tooling
 - [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
 - [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS framework, style your slides at ease
-- [Shiki](https://github.com/shikijs/shiki), [Prism](https://github.com/PrismJS/prism), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
+- [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
 - [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
 - [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/head`](https://github.com/vueuse/head), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
 - [Iconify](https://iconify.design/) - Iconsets collection.

docs/guide/syntax.md

@@ -108,7 +108,7 @@ console.log('Hello, World!')
 ```
 ````
 
-We support [Prism](https://prismjs.com), [Shiki](https://github.com/shikijs/shiki) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details.
+We have [Shiki](https://github.com/shikijs/shiki) builtin as the syntax highlighter. Refer to [the highlighters section](/custom/highlighters) for more details.
 
 ### Line Highlighting
 

docs/guide/why.md

@@ -26,7 +26,7 @@ Check out the [theme gallery](/themes/gallery) or [learn how to write a theme](/
 
 ## Developer Friendly
 
-Slidev provides first-class support for code snippets for developers. It supports both [Prism](https://prismjs.com/) and [Shiki](https://github.com/shikijs/shiki) to get pixel-perfect syntax highlighting, while still being able to modify the code at any time. With [Monaco editor](https://microsoft.github.io/monaco-editor/) built-in, it also empowers you to do live coding / demonstration in your presentation with autocompletion, type hovering, and even TypeScript type check support.
+Slidev provides first-class support for code snippets for developers. It supports [Shiki](https://github.com/shikijs/shiki) to get pixel-perfect syntax highlighting, while still being able to modify the code at any time. With [Monaco editor](https://microsoft.github.io/monaco-editor/) built-in, it also empowers you to do live coding / demonstration in your presentation with autocompletion, type hovering, and even TypeScript type check support.
 
 Learn more about [highlighters](/custom/highlighters) and [Monaco configuration](/custom/config-monaco).
 

docs/themes/write-a-theme.md

@@ -16,8 +16,8 @@ A theme can contribute to the following points:
 - Provide default configurations (fonts, color schema, highlighters, etc.)
 - Provide custom layouts or override the existing one
 - Provide custom components or override the existing one
-- Extend UnoCSS/Windi CSS configurations
-- Configure tools like Monaco and Prism
+- Extend UnoCSS configurations
+- Configure tools like Shiki and Monaco
 
 ## Conventions
 
@@ -118,20 +118,7 @@ Slidev toggles a `dark` class on the page's `html` element for switching color s
 
 ### Highlighter
 
-Syntax highlighting colors are also provided in the theme. We support both [Prism](https://prismjs.com/), [Shiki](https://github.com/shikijs/shiki). For more information please refer to [the syntax highlighting docs](/custom/highlighters).
-
-You can support either one of them, or both. Refer to the default theme for configuration examples [`./styles/code.css`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/styles/code.css) / [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/setup/shiki.ts).
-
-Also, remember to specify the supported highlighters in your `package.json`
-
-```json
-// package.json
-{
- "slidev": {
- "highlighter": "shiki" // or "prism" or "both"
- }
-}
-```
+Syntax highlighting colors are also provided in the theme. For example [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/setup/shiki.ts). Refer to [the syntax highlighting docs](/custom/highlighters) for more information.
 
 ### Slidev Version
 

packages/create-theme/template/styles/index.ts

@@ -1,4 +1,5 @@
 // inherit from base layouts, remove it to get full customizations
 import '@slidev/client/styles/layouts-base.css'
 import './layout.css'
+// TODO: remove this in v0.50
 import './prism.css'

packages/slidev/node/vite/markdown.ts

@@ -53,6 +53,7 @@ export async function createMarkdownPlugin(
  setups.push(md => md.use(result.plugin))
  }
  else {
+ console.warn('[Slidev] Highlighter: Prism highlighter is deprecated, and will be removed in v0.50. Refer to https://github.com/slidevjs/slidev/issues/1390')
  setups.push(md => md.use(MarkdownItPrism))
  }
 

packages/types/src/config.ts

@@ -90,7 +90,7 @@ export interface SlidevConfig {
  * @see https://sli.dev/custom/highlighters.html
  * @default shiki
  */
- highlighter: 'prism' | 'shiki'
+ highlighter: 'shiki' | 'prism'
  /**
  * Enable Twoslash
  *