Add syntax highlighting with Shikiji #17
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I'd like to patch shikiji and npm does not offer an easy way to do that. I have also had some terrible times doing svelte(kit) updates with peer dependencies in npm, having to manually muck around in package-lock.json to break strange deadlocks. Let's give up and use yarn.
At long last, we have syntax highlighting with acceptable tradeoffs. Shikiji is intended to be the next version of the longstanding Shiki. It's fundamentally better in that it simply uses ESM and dynamic imports to break out the wasm blob and the many language grammars into their own JS assets, instead of an ad-hoc asset fetching meechanism. This means it does the right thing when integrating with SvelteKit's vite build tooling, for free. I have had to make minor patches to Shikiji to get it to have the exact APIs that I want. I could have used the stock ones but they would result in a jankier (and slightly less performant) integration. I will propose upstreaming these changes, but I doubt they will all be acceptable. The exact approach to highlighting is discussed in the new LineGroup component. The data returned by content-parser in the API also had to change to more easily merge with Shikiji's highlights.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
At long last, we have syntax highlighting with acceptable tradeoffs.
Shikiji is intended to be the next version of the longstanding Shiki.
It's fundamentally better in that it simply uses ESM and dynamic imports
to break out the wasm blob and the many language grammars into their own
JS assets, instead of an ad-hoc asset fetching meechanism. This means it
does the right thing when integrating with SvelteKit's vite build
tooling, for free.
I have had to make minor patches to Shikiji to get it to have the exact
APIs that I want. I could have used the stock ones but they would result
in a jankier (and slightly less performant) integration. I will propose
upstreaming these changes, but I doubt they will all be acceptable.
The patches required a switch to
yarn. I was long getting tired ofnpm's general jank, but it simply lacks this feature entirely.
The exact approach to highlighting is discussed in the new LineGroup
component. The data returned by content-parser in the API also had to
change to more easily merge with Shikiji's highlights.
Closes #3.