nixinova / novalightshow

A replacement for GitHub LightShow.

NovaLightshow

Lightshow anew!

A website to preview how a TextMate grammar will apply syntax highlighting to associated files on GitHub.

A replacement for the now-defunct GitHub Lightshow.

Supports JSON, CSON, YAML, and XML PList grammars.

---

Try it out!

---

URL API

https://novalightshow.netlify.app/?grammar-type={text|url}&grammar=<content|url>&sample-type={text|url}&sample=<content|url>

• grammar-type={text|url}: Whether to treat the grammar content as raw text or a URL to a file.
• grammar=<content|url>: The grammar content to use, either as text or a URL to fetch from, as determined by grammar-type
• sample-type={text|url}: Whether to treat the sample content as text or a URL to fetch from.
• sample=<content|url>: The sample content to highlight, either as text or a URL, as determined by sample-type.

novalightshow's Issues

TypeError: Expected `string` for `scope`, got `undefined`

This error keeps happening with most (though not all) of the grammars I'm testing. This includes grammars that don't even have a scope property, like this one.

I'm not sure why this happens, any ideas?

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

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

[Bug?] Nemerle grammar file isn't properly highlighted

Hello, as NL still only accepts YAML files, I have to convert essentially every plist / tmLanguage / JSON / CSON / etc file into YAML.

This applies also to my fork of Nemerle's TextMate bundle:

fileTypes:
- n
keyEquivalent: ^~N
name: Nemerle
patterns:
- begin: (^[ \t]+)?(?=//)
  beginCaptures:
    '1':
      name: punctuation.whitespace.comment.leading.nemerle
  end: (?!\G)
  patterns:
  - begin: //
    beginCaptures:
      '0':
        name: punctuation.definition.comment.nemerle
    end: \n
    name: comment.line.double-slash.nemerle
- begin: /\*
  captures:
    '0':
      name: punctuation.definition.comment.nemerle
  end: \*/
  name: comment.block.nemerle
- match: \b(|false|null|true)\b
  name: constant.language.nemerle
- match: \b(([0-9]+(\.|\_)?[0-9]*(b|bu|d|f|L|LU|m|u|ub|UL)?)|(0(b|o|x)[0-9]+))\b
  name: constant.numeric.nemerle
- match: \b(break|catch|continue|else|finally|for|foreach|if|match|matches|otherwise|repeat|try|unless|when|while)\b
  name: keyword.control.nemerle
- match: (\+|\-|\*|\/|\%)\=?
  name: keyword.operator.nemerle
- match: \b(\_|and|as|assert|async|base|callcomp|checked|do|ensures|expose|fun|get|ignore|implements|in|invariant|is|log|lock|namespace|out|params|partial|ref|requires|return|set|syntax|throw|typeof|unchecked|using|with|whenlogging|where|xml|yield|yieldcomp)\b
  name: keyword.other.nemerle
- match: \b(array|bool|byte|char|class|decimal|double|enum|float|int|interface|list|long|macro|module|object|sbyte|short|string|struct|type|uint|ulong|ushort|variant|void)\b
  name: storage.type.nemerle
- match: \b(abstract|comp|def|defcomp|delegate|enumerable|event|extern|internal|mutable|override|public|private|protected|sealed|static|volatile|virtual|new)\b
  name: storage.modifier.nemerle
- match: this
  name: variable.language.nemerle
- begin: '"'
  beginCaptures:
    '0':
      name: punctuation.definition.string.begin.nemerle
  end: '"'
  endCaptures:
    '0':
      name: punctuation.definition.string.end.nemerle
  name: string.quoted.double.nemerle
  patterns:
  - match: \\(\\|'|\"|a|b|c[A-Z]+|e|f|n|r|u0+[0-9,A-Z]+|v)
    name: constant.character.escape.nemerle
- begin: \$"
  beginCaptures:
    '0':
      name: punctuation.definition.string.begin.nemerle
  end: '"'
  endCaptures:
    '0':
      name: punctuation.definition.string.end.nemerle
  name: string.interpolated.nemerle
  patterns:
  - match: \$[a-z,A-Z]+[a-z,A-Z,0-9]*( |\+|\-|\*|\/|\%)
    name: constant.character.escape
- begin: "'"
  beginCaptures:
    '0':
      name: punctuation.definition.string.begin.nemerle
  end: "'"
  endCaptures:
    '0':
      name: punctuation.definition.string.end.nemerle
  name: string.quoted.single.nemerle
  patterns:
  - match: \\(\\|'|\"|a|b|c[A-Z]+|e|f|n|r|u0+[0-9,A-Z]+|v)
    name: constant.character.escape
scopeName: source.nemerle
uuid: F563968D-4CB3-11DB-9F95-00112474B8F0

NL accepts this, but doen't actually highlight the text:

Meanwhile, it still highlights other converted YAML's, like my converted Cython TextMate bundle.

You are evidently very active on GitHub. Please consider looking into this and #1 (which I raised over two weeks ago). Thank you.

[Feedback] Support for other grammar files? + Error display

Hello!

Was wondering if you could potentially consider adding support for non-YAML-based grammar files at some point in the future (like JSON, CSON, XML etc). It's a bit irritating having to try to either find YAML grammars or having to try to convert other grammars (which doesn't work for me).

It'd also be useful to have some sort of "marker" that appears when NL fails to highlight the grammar (e.g. dysfunctional grammar file). Right now, nothing appears at all when you click the button and it doesn't work, which is not too clear imo.

Thanks again for making this!