0.0.6 • Published 4 years ago
svelte-shiki v0.0.6
svelte-shiki
svelte-shiki
is a preprocessor for Svelte/Sapper, providing compile-time syntax highlighting of code elements through the use of Shiki which does all highlighting as inline CSS styles - so no production dependencies! 🎉
Installation
# npm
npm i -D svelte-shiki
# yarn
yarn add -D svelte-shiki
Usage
Add it as a preprocessor to your rollup or webpack config, the svelte-shiki preprocessor is a named import from the svelte-shiki module:
import { svelteShiki } from "svelte-shiki";
const defaultOptions = {
theme: "nord",
langs: undefined
}
export default {
...configStuff,
plugins: [
svelte({
preprocess: [
// other preprocessors ? Mdsvex for intance?
svelteShiki()
]
}),
],
}}
⚠️ NOTE: Remember to declare it for both server and client plugins if applicable!
For options, please refer to the shiki documentation
Elements that will be styled
It works with the following syntaxes:
- Any HTML-styled code block:
<code lang="js">...</code>
- Markdown blocks:
const foo = "bar";
- Inline markdown blocks with the following language identifier:
lang={js} const foo = "bar";
.
Custom themes
Want to use your own theme from VS Code?
import { svelteShiki , loadTheme } from "svelte-shiki";
const theme = loadTheme("./yourTheme.json")
export default {
...configStuff,
plugins: [
svelte({
preprocess: [
// other preprocessors?
svelteShiki({ theme })
]
}),
],
}}
License
MIT