feat: embedded styles in markdown

Author: antfu

docs/guide/syntax.md

@@ -114,6 +114,42 @@ console.log('HelloWorld')
 
 Learn more about [configuring Monaco](/custom/config-monaco).
 
+## Embedded Styles
+
+You can use `<style>` tag in your Markdown directly to override styles for the **current slide**.
+
+```md
+# This is Red
+
+<style>
+h1 {
+  color: red
+}
+</style>
+
+---
+
+# Next slide is not affected
+```
+
+`<style>` tag in Markdown is always [scoped](https://vue-loader.vuejs.org/guide/scoped-css.html). To have global style overrides, check out the [customization section](/custom/directory-structure#style).
+
+Powered by [Windi CSS](https://windicss.org), you can directly use nested css and [directives](https://windicss.org/features/directives.html) (e.g. `@apply`)
+
+```md
+# Slidev
+
+> Hello `world`
+
+<style>
+blockquote {
+  code {
+    @apply text-teal-500 dark:text-teal-400;
+  }
+}
+</style>
+```
+
 ## Notes
 
 You can also take notes for each slide. They will show up in [Presenter Mode](/guide/presenter-mode) for you to reference during presentations.

packages/client/internals/SlideContainer.vue

@@ -89,7 +89,7 @@ const classes = computed(() => {
   <div id="slide-container" ref="root">
     <div id="slide-content" :style="style">
       <slot>
-        <component :is="props.is || route.component" :classes="classes" />
+        <component :is="props.is || route.component" :class="classes" />
       </slot>
     </div>
     <slot name="controls" />

packages/create-app/template/slides.md

@@ -45,6 +45,23 @@ Slidev is a slides maker and presenter designed for developers, consist of the f
 
 Read more about [Why Slidev?](https://sli.dev/guide/why)
 
+<!--
+You can have `style` tag in markdown to override the style for the current page.
+Learn more: https://sli.dev/guide/syntax#embedded-styles
+-->
+
+<style>
+h1 {
+  background-color: #2B90B6;
+  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
+  background-size: 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  -webkit-text-fill-color: transparent; 
+  -moz-text-fill-color: transparent;
+}
+</style>
+
 
 ---
 
@@ -93,10 +110,6 @@ function updateUser(id: number, update: Partial<User>) {
 }
 ```
 
-<!--
-asd
--->
-
 ---
 
 # Components

packages/slidev/node/plugins/loaders.ts

@@ -62,7 +62,12 @@ function prepareSlideInfo(data: SlideInfo): SlideInfoExtended {
   }
 }
 
-export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRoot }: ResolvedSlidevOptions, pluginOptions: SlidevPluginOptions, VuePlugin: Plugin): Plugin[] {
+export function createSlidesLoader(
+  { data, entry, clientRoot, themeRoots, userRoot }: ResolvedSlidevOptions,
+  pluginOptions: SlidevPluginOptions,
+  VuePlugin: Plugin,
+  MarkdownPlugin: Plugin,
+): Plugin[] {
   const slidePrefix = '/@slidev/slides/'
   const hmrPages = new Set<number>()
 
@@ -154,9 +159,7 @@ export function createSlidesLoader({ data, entry, clientRoot, themeRoots, userRo
                   ...ctx,
                   modules: Array.from(module?.importedModules || []),
                   file: id,
-                  read() {
-                    return newData.slides[i - 1]?.raw
-                  },
+                  read: () => (<any>MarkdownPlugin.transform)(newData.slides[i]?.raw, id),
                 },
                 )
               }),

packages/slidev/node/plugins/markdown.ts

@@ -5,7 +5,7 @@ import { Plugin } from 'vite'
 import type { ShikiOptions } from '@slidev/types'
 import type MarkdownIt from 'markdown-it'
 import base64 from 'js-base64'
-import { isTruthy } from '@antfu/utils'
+import { isTruthy, slash } from '@antfu/utils'
 // @ts-expect-error
 import Katex from 'markdown-it-katex'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
@@ -21,10 +21,11 @@ const DEFAULT_SHIKI_OPTIONS: ShikiOptions = {
 }
 
 export async function createMarkdownPlugin(
-  { data: { config }, roots, mode }: ResolvedSlidevOptions,
+  { data: { config }, roots, mode, entry }: ResolvedSlidevOptions,
   { markdown: mdOptions }: SlidevPluginOptions,
 ): Promise<Plugin> {
   const setups: ((md: MarkdownIt) => void)[] = []
+  const entryPath = slash(entry)
 
   if (config.highlighter === 'shiki') {
     const { getHighlighter } = await import('shiki')
@@ -59,13 +60,17 @@ export async function createMarkdownPlugin(
       setups.forEach(i => i(md))
     },
     transforms: {
-      before(code) {
+      before(code, id) {
+        if (id === entryPath)
+          return ''
+
         const monaco = (config.monaco === true || config.monaco === mode)
           ? transformMarkdownMonaco
           : truncateMancoMark
 
         code = monaco(code)
         code = transformHighlighter(code)
+        code = transformPageCSS(code, id)
 
         return code
       },
@@ -102,10 +107,32 @@ export function truncateMancoMark(code: string) {
   return code.replace(/{monaco.*?}/g, '')
 }
 
+/**
+ * Transform Monaco code block to component
+ */
 export function transformHighlighter(md: string) {
-  // transform monaco
   return md.replace(/\n```(\w+?)\s*{([\d\w*,\|-]+)}[\s\n]*([\s\S]+?)\n```/mg, (full, lang = '', rangeStr: string, code: string) => {
     const ranges = rangeStr.split(/\|/g).map(i => i.trim())
     return `\n<CodeHighlightController :ranges='${JSON.stringify(ranges)}'>\n\n\`\`\`${lang}\n${code}\n\`\`\`\n\n</CodeHighlightController>`
   })
 }
+
+/**
+ * Transform <style> in markdown to scoped style with page selector
+ */
+export function transformPageCSS(md: string, id: string) {
+  const page = id.match(/(\d+)\.md$/)?.[1]
+  if (!page)
+    return md
+
+  const result = md.replace(
+    /(\n<style[^>]*?>)([\s\S]+?)(<\/style>)/g,
+    (full, start, css, end) => {
+      if (!start.includes('scoped'))
+        start = start.replace('<style', '<style scoped')
+      return `${start}\n.slidev-page-${page}{${css}}${end}`
+    },
+  )
+
+  return result
+}

packages/slidev/node/plugins/preset.ts

@@ -67,13 +67,14 @@ export async function ViteSlidevPlugin(
     ...vueOptions,
   })
 
+  const MarkdownPlugin = await createMarkdownPlugin(options, pluginOptions)
+
   return [
     createWindiCSSPlugin(options, pluginOptions),
-    await createMarkdownPlugin(options, pluginOptions),
-
+    MarkdownPlugin,
     VuePlugin,
 
-    createSlidesLoader(options, pluginOptions, VuePlugin),
+    createSlidesLoader(options, pluginOptions, VuePlugin, MarkdownPlugin),
 
     ViteComponents({
       extensions: ['vue', 'md', 'ts'],

packages/theme-seriph/styles/layouts.css

@@ -1,4 +1,4 @@
-.slidev-layout:not(.cover) {
+.slidev-layout {
   h1 {
     @apply text-primary;
   }
@@ -9,6 +9,7 @@
   @apply h-full grid;
 
   h1 {
+    color: inherit;
     @apply text-6xl leading-20;
   }