WIP: Shiki based syntax highlighting in codemirror#1987
Conversation
|
|
evoactivity
force-pushed
the
shiki-highlighter
branch
from
9e6781e to
22491b5
Compare
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
Footnotes
|
|
|
||
| shiki({ | ||
| highlighter, | ||
| language: 'glimmer-js', |
There was a problem hiding this comment.
looks like we'd need a map of format+flavor to language id 🤔
| import { getCompiler } from 'ember-repl'; | ||
|
|
||
| import { HorizonSyntaxTheme, HorizonTheme } from './theme.ts'; | ||
| import { HorizonTheme } from './theme.ts'; |
There was a problem hiding this comment.
do we have to lose the theme 🙈 I like Horizon haha
There was a problem hiding this comment.
Probably will need to lose it, or reimplement it for shiki. Probably best to either offer a theme selector with the shiki themes or pick your favourite shiki theme :)
There was a problem hiding this comment.
Definitely need to lose it lol, I had to setup an empty highlighter theme to disable lezer clobbering shiki.
I've asked the author hwo they use lezer language features with shiki (waiting on moderator approval on codemirror forum) so maybe there is another way, but maybe that's how they do it too.
There was a problem hiding this comment.
did you end up getting a response there?
There was a problem hiding this comment.
They recommended just not using syntaxHighlighting() function, but I'm pretty sure I lost other lezer features when doing that.
|
EXCITE! |
evoactivity
force-pushed
the
shiki-highlighter
branch
from
e8dd708 to
86dbede
Compare
| import('@shikijs/langs/javascript'), | ||
| import('@shikijs/langs/glimmer-js'), | ||
| import('@shikijs/langs/markdown'), | ||
| import('@shikijs/langs/svelte'), | ||
| import('@shikijs/langs/vue'), |
There was a problem hiding this comment.
We should load these lazily
| const formatToLanguage = { | ||
| js: 'javascript', | ||
| jsx: 'javascript', | ||
| ts: 'typescript', | ||
| tsx: 'typescript', | ||
| gdm: 'markdown', | ||
| gmd: 'markdown', | ||
| glimdown: 'markdown', | ||
| svelte: 'svelte', | ||
| vue: 'vue', | ||
| gjs: 'glimmer-js', | ||
| gts: 'glimmer-ts', | ||
| }; |
There was a problem hiding this comment.
Should this live here or somewhere else?
2 participants
First commit is just a proof of concept.
Switching between languages will be the main thing to figure out from here.