Missing some punctuation highlight

[vanyauhalin]

Hey Titus! Thank you so much for Starry Night. It's exactly what I've been searching for.

I'm currently working on a theme that uses punctuation in a slightly different way than the usual text. However, I'm missing some classes for punctuation in the final HTML.

export { Root } from 'hast'

This is how GitHub parses the code:

<span class="pl-k">export</span>
<span class="pl-kos">{</span>
<span class="pl-smi">Root</span>
<span class="pl-kos">}</span>
<span class="pl-k">from</span>
<span class="pl-s">'hast'</span>

This is how Starry Night parses the code:

<span class="pl-k">export</span>
{
<span class="pl-smi">Root</span>
}
<span class="pl-k">from</span>
<span class="pl-s">
  <span class="pl-pds">'</span>
  hast
  <span class="pl-pds">'</span>
</span>

At first glance, this appears to be a list of rules that haven't yet been implemented:

punctuation.definition.block.js
punctuation.terminator.statement.js
punctuation.definition.parameters.begin.js
punctuation.definition.parameters.end.js
punctuation.accessor.js
punctuation.separator.comma.js
meta.brace.square.js

Did I miss something?

[wooorm]

Hi!

GH uses treesitter for JS. Some more on how this project works is here in the readme: https://github.com/wooorm/starry-night?tab=readme-ov-file#when-should-i-use-this.

See also https://github.com/wooorm/starry-night/issues/10.

So, we can never match how GitHub normally (tree sitter) does JavaScript in this project (which is not tree sitter). And that is not be a goal. Because GH does two things. And we do one of them. If we change how we do it here, we don’t match what the goal is anymore.

There is a way we can see how GH uses textmate grammars for JS, by embedding JavaScript into something else, such as markdown:

```javascript
export { Root } from 'hast'

Inspecting that, we see that GH does exactly what starry-night does!

So, I’m closing this as not an issue for this project.
But, I’d love to have a project that does the treelights version existing. It’s probably a bunch of work that I don‘t have the time for currently.

[vanyauhalin]

Maybe I didn't fully grasp the main idea of the project. I simply wanted to utilize TextMate for generating code snippets in HTML.

PRs: #26, #27, #28, #29, #30, #31, #32.

[wooorm]

It sounds like you might enjoy shiki, which is mentioned in the alternatives here: https://github.com/wooorm/starry-night#when-should-i-use-this. With Shiki (and https://github.com/antfu/shikiji), you can pass your own grammars and your own themes. With this project, the goal is to get back exactly what GitHub does with Pretty Lights, and to use its CSS rules. At some point, getting back exactly what they do with Tree Lights might also be of interested here, but there are downsides: it requires a ton of extra code.

[vanyauhalin]

Yes, shiki is closer to what I would like to receive. However, it uses inline styles. It would be interesting to combine the best aspects of shiki and starry-night: using the TextMate grammar and CSS classes. If I've enough skills, I'll give it a try.

[wooorm]

You can use the same technique as here: colors are numbers, so they can contains a lot of info. You’ve got a foreground and a background. Shiki does something similar fork their css variables theme!