Upgrade shiki - Githubissues

remix-run / remix-website

322 stars 72 forks source link

Upgrade shiki #237

Open brookslybrand opened 5 months ago

brookslybrand commented 5 months ago

Shiki, our code syntax highlighter, has undergone a number of upgrades since the current version we have (0.14.7). This is a major version upgrade, so there are some breaking changes

Migration guide

In order to stay up to date with bug fixes and the latest and greatest we should invest in upgrading this package

tlawrie commented 3 months ago

@brookslybrand could we use https://rehype-pretty.pages.dev/? I have swapped out the custom shiki for this in a fork and it works.

I didn't try it with custom themes as with yours, however it does have a themes option which might work.

brookslybrand commented 3 months ago

@brookslybrand could we use https://rehype-pretty.pages.dev/? I have swapped out the custom shiki for this in a fork and it works.

I didn't try it with custom themes as with yours, however it does have a themes option which might work.

I'm not totally against it, but since I didn't really build this part and try to not touch it too much since it's all working correctly, I'm a bit hesitant to change it. Do you think it'd just be more maintainable? I'm open to a PR

tlawrie commented 3 months ago

@brookslybrand I have made some progress

This uses the latests shiki and replaces ~230 with ~10.

However, having trouble getting the line highlighting working and the numbered rows

Left is website. Right is local.

tlawrie commented 3 months ago

@brookslybrand I have it, using a framework and cutting out the code.

Required changes to the MD meta strings

the highlighter syntax changes from the custom lines[4,12] to the standard syntax tsx {10,14}
the filename meta string changes from filename=app/components/button/styles.module.css to title="app/components/button/styles.module.css"

Other cosmetic differences:

the copy button is of a slightly different style and always present. I can make it 'hover' only but it doesn't show up on hover of the code block and instead you need to hover over the actual button. I have made it always present with an opacity.
if the code block has a title area, the copy button is still on the code section of the code block and not in the title section.