Vite plugin

Plugin options

export interface SveltepressVitePluginOptions {
  theme?: ResolvedTheme
  siteConfig?: SiteConfig
  addInspect?: boolean
  remarkPlugins?: Plugin[]
  rehypePlugins?: Plugin[]
}
export interface SveltepressVitePluginOptions {
  theme?: ResolvedTheme
  siteConfig?: SiteConfig
  addInspect?: boolean
  remarkPlugins?: Plugin[]
  rehypePlugins?: Plugin[]
}
ts

siteConfig

export interface SiteConfig {
  title?: string
  description?: string
}
export interface SiteConfig {
  title?: string
  description?: string
}
ts
  • title: The site title. Would be 'Untitled site' if not provided.
  • description: The site description. Would be 'Build by sveltepress' if not provided.

addInspect

If set to true, will add

Vite plugin inspect
.
It is useful to inspect or observe the vite pipeline.

theme

See

ResolvedTheme
below

remarkPlugins

The remark plugins used for markdown parse.
Read

Remark plugins
for more details.

rehypePlugins

The rehype plugins used for html generator. Read

Rehype plugins
for more details.

ResolvedTheme

export interface ResolvedTheme {
  name: string
  globalLayout: string
  pageLayout: string
  vitePlugins: PluginOption | ((corePlugin: PluginOption) => PluginOption[])
  highlighter: Highlighter
  remarkPlugins?: Plugin[]
  rehypePlugins?: Plugin[]
  /**
   * The footnote label used for [remark rehype](https://github.com/remarkjs/remark-rehype#api)
   */
  footnoteLabel?: string
}
export interface ResolvedTheme {
  name: string
  globalLayout: string
  pageLayout: string
  vitePlugins: PluginOption | ((corePlugin: PluginOption) => PluginOption[])
  highlighter: Highlighter
  remarkPlugins?: Plugin[]
  rehypePlugins?: Plugin[]
  /**
   * The footnote label used for [remark rehype](https://github.com/remarkjs/remark-rehype#api)
   */
  footnoteLabel?: string
}
ts

name

The name of theme

globalLayout

The absolute path of global layout. Should be a svelte file
For example: path.resolve(process.cwd(), 'ThemeGlobalLayout.svelte')

pageLayout

The absolute path of page layout. Should be a svelte file
For example: path.resolve(process.cwd(), 'ThemePageLayout.svelte')

vitePlugins

  • If passed a plugin or a group of plugins. These plugins would applied in front of sveltepress
  • If passed a function. It will accept the sveltepress plugin and need to return a group of plugins.
    You can customize the sveltepress plugin order in your returned plugin chain.
About theme vite plugins

It maybe a little strange that theme has vite plugins.
But it is useful when the theme want's to add some

or write some temp files.

highlighter

Used for code highlighting.
For example, the default theme use

shiki
.
You can check the
Default theme highlighter source code
 for detail usage.

remarkPlugins

The remark plugins used for markdown parse.
Read

Remark plugins
for more details.

rehypePlugins

The rehype plugins used for html generator. Read

Rehype plugins
for more details.

Plugins order

The remark and rehype plugins that theme provide would be called before the plugins provide by vite plugin. For example:

vite.config.(js|ts)
import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'
import { defaultTheme } from '@sveltepress/theme-default'

export default defineConfig({
  plugins: [
    sveltepress({
      theme: defaultTheme(/* theme options */),
      remarkPlugins: [yourRemarkPlugin]
    })
  ]
})
import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'
import { defaultTheme } from '@sveltepress/theme-default'

export default defineConfig({
  plugins: [
    sveltepress({
      theme: defaultTheme(/* theme options */),
      remarkPlugins: [yourRemarkPlugin]
    })
  ]
})
js

yourRemarkPlugin would run after the remark plugins in defaultTheme

footnoteLabel

Customize the footnotes title, default is: "Footnotes"

Virtual modules

virtual:sveltepress/site

This module hold the siteConfig. Here's an example

The site title is: Sveltepress

The site description is: A content centered site build tool

<script>
  import siteConfig from 'virtual:sveltepress/site'
</script>

<p>The site title is: {siteConfig.title}</p>
<p>The site description is: {siteConfig.description}</p>
<script>
  import siteConfig from 'virtual:sveltepress/site'
</script>

<p>The site title is: {siteConfig.title}</p>
<p>The site description is: {siteConfig.description}</p>
svelte
Click fold/expand code

Low level API

The @sveltepress/vite package has a low level api function mdToSvelte

It is used for all the major markdown render in Sveltepress.

It can be used for a more basic markdown render engine involved with Svelte.

Here's usage example:

import { mdToSvelte } from '@sveltepress/vite'

const mdContent = `
---
title: Foo 
---
<script>
  const foo = 'bar'
</script>
# Title

foo in script is: {foo}

[Foo Link](https://foo.bar)
`

const { code, data } = await mdToSvelte({
  mdContent,
  remarkPlugins: [], // your custom remark plugins
  rehypePlugins: [], // your custom rehype plugins
  highlighter: async (code, lang, meta) => Promise.resolve('The rendered highlighted code html'), // your custom code highlighter
  filename, // the virtual file path
})

// The rendered svelte code
code

// The frontmatter object, { title: 'Foo' }
data
import { mdToSvelte } from '@sveltepress/vite'

const mdContent = `
---
title: Foo 
---
<script>
  const foo = 'bar'
</script>
# Title

foo in script is: {foo}

[Foo Link](https://foo.bar)
`

const { code, data } = await mdToSvelte({
  mdContent,
  remarkPlugins: [], // your custom remark plugins
  rehypePlugins: [], // your custom rehype plugins
  highlighter: async (code, lang, meta) => Promise.resolve('The rendered highlighted code html'), // your custom code highlighter
  filename, // the virtual file path
})

// The rendered svelte code
code

// The frontmatter object, { title: 'Foo' }
data
ts

Working with typescript

You need to include @sveltepress/vite/types in your src/app.d.ts to get plugin options and virtual modules type tips

/src/app.d.ts
/// <reference types="@sveltepress/vite/types" />

// Your other types
/// <reference types="@sveltepress/vite/types" />

// Your other types
ts
Suggest changes to this page
Last update at: 2023/08/10 20:32:21