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
It is useful to inspect or observe the vite pipeline.
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 thesveltepress
plugin order in your returned plugin chain.
It maybe a little strange that theme has vite plugins.
But it is useful when the theme want's to add some
highlighter
Used for code highlighting.
For example, the default theme use
You can check the
remarkPlugins
The remark plugins used for markdown parse.
Read
rehypePlugins
The rehype plugins used for html generator.
Read
The remark and rehype plugins that theme provide would be called before the plugins provide by vite plugin. For example:
import { } from 'vite'
import { } from '@sveltepress/vite'
import { } from '@sveltepress/theme-default'
export default ({
: [
({
: (/* theme options */),
: [/* yourRemarkPlugin */]
})
]
})
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 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