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

Plugin options

siteConfig

• title: The site's title. Would be 'Untitled site' if not provided.
• description: The site's 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 the theme.

globalLayout

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

pageLayout

The absolute path of the 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 before 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.

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 parsing. Read Remark plugins for more details.

rehypePlugins

The rehype plugins used for HTML generation. Read Rehype plugins for more details.

import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : (/* theme options */),
      : [/* yourRemarkPlugin */]
    })
  ]
})

footnoteLabel

Customize the footnotes title, default is: "Footnotes"

Virtual modules

virtual:sveltepress/site

This module holds the siteConfig. For example:

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

<p>The site title is: {.}</p>
<p>The site description is: {.}</p>

Low level API

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

It is used for all the major Markdown rendering 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' }

Working with TypeScript

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

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

// Your other types