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:
; const defaultOptions = theme: "nord" langs: undefined ...configStuff plugins: }
⚠️ 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?
;
License
MIT