📖 Use MDsveX for documentation

[bennymi]

Then we can just use markdown to write the documentation and create code blocks which is much easier. Use Shiki to pick a nice syntax highlighting theme.

TODOs

• update code blocks to have a copy button
• update code blocks to show file name or file extension automatically
• see if we can add highlight lines to code blocks
• instead of folder -> +page.svelte structure see if we can put all markdown files into one folder
• add shiki-twoslash (https://github.com/shikijs/twoslash)

Resources:

• https://github.com/sveltejs/kit/blob/a243aa664bbe4e469b389be8481965521e0ab825/sites/kit.svelte.dev/src/lib/docs/server/index.js
• https://github.com/jacob-8/kitbook/blob/main/packages/mdsvex-shiki-twoslash/src/index.ts
• https://github.com/pngwn/MDsveX
• https://www.youtube.com/watch?v=RhScu3uqGd0
• https://github.com/shikijs/shiki
• https://github.com/vuejs/vitepress/tree/9708510cbd893f02916c95fabad5a8f07d52dbaf/src/node/markdown/plugins
• https://github.com/jacob-8/kitbook/tree/main/packages/mdsvex-shiki-twoslash
• https://github.com/jacob-8/kitbook/blob/4ec47738200e2352c5b9dfee70054948cb993ab8/packages/vite-plugin-kitbook/src/mdsvex/mdsvex.config.ts
• https://github.com/svelteness/kit-docs/tree/main/packages/kit-docs/src/routes
• https://github.com/vuejs/vitepress/blob/70ba404cb876d3654a701cc72afcb2df45a21e03/__tests__/e2e/markdown-extensions/index.md

Code Block Customization

• Copy button on code blocks pngwn/MDsveX#385
• https://github.com/gitpod-io/website/blob/main/src/lib/components/code-fence.svelte
• https://github.com/ gitpod-io/ website/ pull/ 2322
• https://github.com/gitpod-io/website/blob/main/src/lib/utils/highlight.js
• https://github.com/gitpod-io/website/blob/main/src/lib/utils/mdsvex-global-components.js
• https://github.com/gitpod-io/website/blob/main/svelte.config.js
• https://gist.github.com/Xananax/5dca3a1dd7070e4fdebe2927e4aeb55b