Highlight.js: GraphQL (needs package & maintainer)

[astorije]

GraphQL can describe both a type system and a query language, both in a consistent manner.

Example of a type (GitHub code blocks support GraphQL):

type Project {
  name: String
  tagline: String
  contributors: [User]
}

Example of a query:

query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
    ... on Human {
      height
    }
  }
}

[schickling]

Any progress on this?

[nic]

hljs.registerLanguage("graphql",function(e){return{aliases:["gql"],k:{keyword:"query mutation subscription|10 type interface union scalar fragment|10 enum on ...",literal:"true false null"},c:[e.HCM,e.QSM,e.NM,{cN:"type",b:"[^\\w][A-Z][a-z]",e:"\\W",eE:!0},{cN:"literal",b:"[^\\w][A-Z][A-Z]",e:"\\W",eE:!0},{cN:"variable",b:"\\$",e:"\\W",eE:!0},{cN:"keyword",b:"[.]{2}",e:"\\."},{cN:"meta",b:"@",e:"\\W",eE:!0}],i:/([;<']|BEGIN)/}});

[astorije]

There is also an open PR on this: https://github.com/isagalaev/highlight.js/pull/1543
@nic, do you want to help them by providing an external review there?

[nodkz]

Five cents to @nic's solution:

hljs.registerLanguage("graphql",function(e){return{aliases:["gql"],k:{keyword:"query mutation subscription|10 type input schema directive interface union scalar fragment|10 enum on ...",literal:"true false null"},c:[e.HCM,e.QSM,e.NM,{cN:"type",b:"[^\\w][A-Z][a-z]",e:"\\W",eE:!0},{cN:"literal",b:"[^\\w][A-Z][A-Z]",e:"\\W",eE:!0},{cN:"variable",b:"\\$",e:"\\W",eE:!0},{cN:"keyword",b:"[.]{2}",e:"\\."},{cN:"meta",b:"@",e:"\\W",eE:!0}],i:/([;<']|BEGIN)/}});

Added schema, directive and input keywords.

[morleym]

I really wish this were implemented because Docusaurus is using Highlight.js and that means all of our GraphQL examples with fenced code blocks do not have nice *highlighting for the requests (queries).

[PulsGarney]

Dunno how to get the example above to work since I am using highlight.js via npm.

But based on @nodkz 's snippet I eventually kinda unwrap it into the unpacked version and got it running now. I am not quite sure if I had did it right, but at lease it's working now.

Put it here in case anyone needs it. And if I got it wrong somewhere please let me know. 😂

import hljs from 'highlight.js';


hljs.registerLanguage("graphql", function (e) {
  return {
    aliases: ["gql"],
    keywords: {
      keyword: "query mutation subscription|10 type input schema directive interface union scalar fragment|10 enum on ...",
      literal: "true false null"
    },
    contains: [
      e.HASH_COMMENT_MODE,
      e.QUOTE_STRING_MODE,
      e.NUMBER_MODE,
      {
        className: "type",
        begin: "[^\\w][A-Z][a-z]",
        end: "\\W",
        excludeEnd: !0,
      },
      {
        className: "literal",
        begin: "[^\\w][A-Z][A-Z]",
        end: "\\W",
        excludeEnd: !0,
      },
      {
        className: "variable",
        begin: "\\$",
        end: "\\W",
        excludeEnd: !0,
      },
      {
        className: "keyword",
        begin: "[.]{2}",
        end: "\\.",
      },
      {
        className: "meta",
        begin: "@",
        end: "\\W",
        excludeEnd: !0,
      },
    ],
    illegal: /([;<']|BEGIN)/,
  };
});


export default hljs;

And now you can just import hljs from this file to get it going.

[morleym]

@PulsGarney this works, one thing to point out is that this does not highlight query/mutation names or variable types the same way as GitHub's highlighting.

query Foo ($id: Int!) {
  thing(id: $id){
    id
    name
  }
}

Whereas the result in this highlighting in your snippet looks like this (on the atom-one-light style):

I'm guessing the next step has more to do with grammar to highlight, like here: https://github.com/rmosolgo/language-graphql/blob/master/grammars/graphql.json

[joshgoebel]

Is anyone willing to package this up nicely into a repository that we could link to or host here inside the highlightjs organization (we'd need a maintainer for it)... This needs a better home than living inside this issue. We're trying to clear out all the super old issues.

[stephencweiss]

@yyyc514 - what is involved in packaging / maintaining? Would love to help as I'm finding myself in need of a good syntax highlighting for graphql and we use highlightjs.

(Said another way - if you have an example you can point me to, I'd love to give it a go)

Cheers!

[joshgoebel]

Preferably just someone knowledgable with Highlight.js language grammar functionality and also familiar with GraphQL - who could handle issues and fixes that people raised with the grammar. Right now there is the code and PRs above... they'd need to be pulled out into their own repo - and then you'd become the maintainer of said repo.

There aren't any docs for this yet but there are a few sample repos (though I think the specifics may change after we circle back around to packaging). I plan to get to that in the next iteration.

Samples can be found in the highlightjs org:
https://github.com/highlightjs/

[joshgoebel]

@stephencweiss The 3rd party stuff is pretty ready to go now if you wanted to take a shot at this.

[joshgoebel]

Closing this issue for lack of activity. Any one who'd like to take what's here and step up and contribute a 3rd party language grammar, that would be awesome. :-)

[dadooda]

Those willing to use the recipe with TypeDoc code fences in Markdown, consider such typedoc.js outline (ES6 syntax):

const hljs = require("highlight.js")

// Register GraphQL highlighting for code fences.
// See https://github.com/highlightjs/highlight.js/issues/1471.
hljs.registerLanguage("graphql", function (e) {
  return {
    aliases: ["gql"],
    keywords: {
      keyword: "query mutation subscription|10 type input schema directive interface union scalar fragment|10 enum on ...",
      literal: "true false null",
    },
    … (see code above)
  }
})

// TypeDoc configuration.
module.exports = {
  out: "docs",
  … (additional TypeDoc settings)
}