search

rgossiaux / svelte-headlessui

Unofficial Svelte port of the Headless UI component library
https://svelte-headlessui.goss.io
MIT License
1.78k stars 96 forks source link

[docs] Highlight important lines in code snippets #71

Open rgossiaux opened 2 years ago

rgossiaux commented 2 years ago

Been meaning to set this up but it wasn't worth blocking the docs on.

Some inspiration:

https://ped.ro/writing/code-blocks-but-better https://github.com/shikijs/shiki and some related shiki projects like CodeHike https://github.com/bluwy/website/blob/master/packages/markdown/remark-shiki.js

NoelOConnell commented 1 year ago

I've been experimenting with this on a branch

It uses whyframe to render the components in isolation. I created a component to toggle between the preview and code. I based the UI from the HeadlessUI docs.

I've also update the mdsvex config for custom code highlighting with now includes the option to highlight selected lines in the code.

In the screenshot you can see the updated UI and the line highlighting. I've only updated this in one place as an example.

Happy for feedback and suggestions and I could progress this more if it is of interest.

image