Improve Preview / Code examples

[techniq]

• [ ] Consider switching from PrismJS to Shiki syntax highlighting
  • https://github.com/shikijs/shiki
  • https://rodneylab.com/sveltekit-shiki-syntax-highlighting/
  • https://github.com/rodneylab/sveltekit-shiki-code-highlighting
  • https://joyofcode.xyz/sveltekit-markdown-blog#syntax-highlighting
  • https://github.com/rehype-pretty/rehype-pretty-code/tree/master/examples/sveltekit
• [ ] Support tailwind configuration
  • https://github.com/bennymi/svhighlight (highlight.js based)
• [ ] Improve preprocessor
  • https://github.com/metonym/svelte-preprocess-highlight/blob/master/src/index.ts
  • https://www.svelteui.org/preprocessors/view-source
  • https://github.com/svelteuidev/svelteui/blob/main/packages/svelteui-preprocessors/src/SourceCode/preprocess.ts

[techniq]

Shikiji might be even better, which is an ESM-focused rewrite of shiki

[techniq]

Shikiji was merged into shiki. Also using twoslash (similar to kit's docs) would be great.

[techniq]

Another reference: https://github.com/joshnuss/airbadge/blob/main/apps/docs/src/lib/highlighter.js

[brandonmcconnell]

This example implements the ESM version of Shiki (v1+) into SvelteKit. Might serve as a good inspo or example. https://github.com/rodneylab/sveltekit-shiki-code-highlighting

These appear to be the key files:

• /mdsvex.config.mjs
• /src/lib/utilities/codeHighlighter.mjs
• /src/routes/+page.svelte.md
• /src/lib/components/MarkdownLayout.svelte

---

@rodneylab have you released a package version of your repo that can be installed without needing to copy everything from those files^ verbatim into existing projects?

Thanks for putting in all the work on this btw!