Highlighting not applying inside `script` tags in some HTML-based languages

kindoflew commented 2 years ago

Hi, thanks for this rad project!

Background

I'm in the process of trying to figure out why syntax highlighting is broken for .svelte files on GitHub. .svelte files are a superset of HTML and there is currently no syntax highlighting inside script and style tags for it (unrelated to NovaLightshow, but here for context).

Bug(?)

Another dev linked me to this project and I started trying things out with it. After struggling to make any progress, I decided to see if I could pull some ideas from a similar language where syntax highlighting is working on GitHub (vue).

After putting in vue's grammar and an example of a vue file, I noticed that syntax highlighting inside script tags was not working for this language either. Looking in dev tools, it seems that the contents inside script tags aren't being wrapped in any additional tags to handle adding classes to them (although, comments seem to be highlighted).

To Reproduce

Use vue's grammar file (linked below) and an example of a vue file for "Sample Content" (taken from vue-carousel and shortened for clarity):

<template>
  <div
    class="VueCarousel-slide"
    :aria-hidden="!isActive"
    :class="{
      'VueCarousel-slide-active': isActive,
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "slide",
  props: ["title"],
  data() {
    return {
      width: null
    };
  },
  mounted() {
    if (!this.$isServer) {
      this.$el.addEventListener("dragstart", e => e.preventDefault());
    }
    this.$el.addEventListener(
      this.carousel.isTouch ? "touchend" : "mouseup",
      this.onTouchEnd
    );
  },
  computed: {
    /**
     * `isActive` describes whether a slide is visible
     * @return {Boolean}
     */
    isActive() {
      return this.activeSlides.indexOf(this._uid) >= 0;
    },
  },
};
</script>

<style>
.VueCarousel-slide {
  color: red;
}
</style>

Link to vue's grammar: https://github.com/vuejs/vue-syntax-highlight/blob/master/vue.YAML-tmLanguage

Nixinova commented 2 years ago

Thanks for the support!

This issue is not unique to these files.

The vue grammar includes the following lines that import TypeScript highlighting: https://github.com/vuejs/vue-syntax-highlight/blob/6d405948df4a112eb7a4db2ed72bbfe76dd9f419/vue.YAML-tmLanguage#L226-L227

In order for NovaLightshow to apply this highlighting it would need to know what file "source.ts" refers to which is not at all easy.

GitHub Linguist has a complicated script for finding these: https://github.com/github/linguist/blob/32ec19c013a7f81ffaeead25e6e8f9668c7ed574/tools/grammars/compiler/loader.go

So I dont think this issue is solveable :/

kindoflew commented 2 years ago

ahh, i see. no worries! thanks again for this tool!

Nixinova / NovaLightshow