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 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

theme

See

remarkPlugins

The remark plugins used for markdown parse.
Read

rehypePlugins

The rehype plugins used for html generator. Read

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.

highlighter

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

remarkPlugins

The remark plugins used for markdown parse.
Read

rehypePlugins

The rehype plugins used for html generator. Read

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

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

footnoteLabel

Customize the footnotes title, default is: "Footnotes"

Virtual modules

virtual:sveltepress/site

This module hold the siteConfig. Here's an 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 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' }

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

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

// Your other types