Vite plugin

Types overview

import type {  } from 'shiki/langs'
import type {  } from 'unified'
import type {  } from 'vite'

export type  = <[], any>

export type  = (: string, : , ?: string) => string | <string>

export interface SiteConfig {
  ?: string
  ?: string
}
export interface ResolvedTheme {
  : string
  : string
  : string
  :  | ((: ) => [])
  : 
  ?: []
  ?: []
  /**
   * The footnote label used for [remark rehype](https://github.com/remarkjs/remark-rehype#api)
   */
  ?: string
}
export interface SveltepressVitePluginOptions {
  ?: ResolvedTheme
  ?: SiteConfig
  ?: boolean
  ?: []
  ?: []
}

export type < = any> = (?: ) => ResolvedTheme
ts

Plugin options

siteConfig

  • 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

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]
    })
  ]
})
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>
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 {  } from '@sveltepress/vite'

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

foo in script is: {foo}

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

const { ,  } = await ({
  ,
  : [], // your custom remark plugins
  : [], // your custom rehype plugins
  : async (, , ) => .('The rendered highlighted code html'), // your custom code highlighter
  : 'foo.md', // the virtual file path
})

// The rendered svelte code


// The frontmatter object, { title: 'Foo' }
ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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
ts
Last update at: 2024/02/20 08:44:13