feat: adding highlight support for graphql (#173)

Author: erunion

README.md

@@ -75,6 +75,7 @@ const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', { ...opts,
 | Docker | `dockerfile` |
 | Erlang | `erl`, `erlang` |
 | Go | `go` |
+| GraphQL | `gql`, `graphql` |
 | Groovy | `gradle`, `groovy` |
 | Handlebars | `handlebars`, `hbs` |
 | HTML/XML | `html`, `xhtml`, `xml` |

__tests__/__fixtures__/graphql/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+  language: 'GraphQL',
+  mode: {
+    primary: 'graphql',
+    aliases: {
+      gql: 'GraphQL',
+    },
+  },
+};

__tests__/__fixtures__/graphql/sample.graphql

@@ -0,0 +1,19 @@
+{
+  person(id: 4) {
+    name
+  }
+  allFilms {
+    totalCount
+    films {
+      releaseDate
+      planetConnection {
+        planets {
+          id
+          surfaceWater
+          climates
+          terrains
+        }
+      }
+    }
+  }
+}

__tests__/__snapshots__/codeMirror.test.js.snap

@@ -112,6 +112,29 @@ exports[`Supported languages Go should syntax highlight an example 1`] = `
 </div>"
 `;
 
+exports[`Supported languages GraphQL should syntax highlight an example 1`] = `
+"<div class=\\"cm-s-neo\\"><span class=\\"cm-punctuation\\">{</span>
+<span class=\\"cm-ws\\">  </span><span class=\\"cm-property\\">person</span><span class=\\"cm-punctuation\\">(</span><span class=\\"cm-attribute\\">id</span><span class=\\"cm-punctuation\\">:</span><span class=\\"cm-ws\\"> </span><span class=\\"cm-number\\">4</span><span class=\\"cm-punctuation\\">)</span><span class=\\"cm-ws\\"> </span><span class=\\"cm-punctuation\\">{</span>
+<span class=\\"cm-ws\\">    </span><span class=\\"cm-property\\">name</span>
+<span class=\\"cm-ws\\">  </span><span class=\\"cm-punctuation\\">}</span>
+<span class=\\"cm-ws\\">  </span><span class=\\"cm-property\\">allFilms</span><span class=\\"cm-ws\\"> </span><span class=\\"cm-punctuation\\">{</span>
+<span class=\\"cm-ws\\">    </span><span class=\\"cm-property\\">totalCount</span>
+<span class=\\"cm-ws\\">    </span><span class=\\"cm-property\\">films</span><span class=\\"cm-ws\\"> </span><span class=\\"cm-punctuation\\">{</span>
+<span class=\\"cm-ws\\">      </span><span class=\\"cm-property\\">releaseDate</span>
+<span class=\\"cm-ws\\">      </span><span class=\\"cm-property\\">planetConnection</span><span class=\\"cm-ws\\"> </span><span class=\\"cm-punctuation\\">{</span>
+<span class=\\"cm-ws\\">        </span><span class=\\"cm-property\\">planets</span><span class=\\"cm-ws\\"> </span><span class=\\"cm-punctuation\\">{</span>
+<span class=\\"cm-ws\\">          </span><span class=\\"cm-property\\">id</span>
+<span class=\\"cm-ws\\">          </span><span class=\\"cm-property\\">surfaceWater</span>
+<span class=\\"cm-ws\\">          </span><span class=\\"cm-property\\">climates</span>
+<span class=\\"cm-ws\\">          </span><span class=\\"cm-property\\">terrains</span>
+<span class=\\"cm-ws\\">        </span><span class=\\"cm-punctuation\\">}</span>
+<span class=\\"cm-ws\\">      </span><span class=\\"cm-punctuation\\">}</span>
+<span class=\\"cm-ws\\">    </span><span class=\\"cm-punctuation\\">}</span>
+<span class=\\"cm-ws\\">  </span><span class=\\"cm-punctuation\\">}</span>
+<span class=\\"cm-punctuation\\">}</span>
+</div>"
+`;
+
 exports[`Supported languages Groovy should syntax highlight an example 1`] = `
 "<div class=\\"cm-s-neo\\"><span class=\\"cm-variable\\">println</span> <span class=\\"cm-string\\">&quot;Hello World&quot;</span>
 </div>"

package-lock.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "codemirror": "^5.48.2",
+    "codemirror-graphql": "^1.0.2",
     "prop-types": "^15.7.2",
     "react-codemirror2": "^7.2.1"
   },

package.json

@@ -13,6 +13,7 @@ const modeAliases = {
   docker: 'dockerfile',
   ecmascript: 'javascript',
   erl: 'erlang',
+  gql: 'graphql',
   gradle: 'groovy',
   handlebars: 'html',
   hbs: 'html',

src/utils/canonical.js

@@ -26,3 +26,4 @@ require('codemirror/mode/sql/sql');
 require('codemirror/mode/swift/swift');
 require('codemirror/mode/toml/toml');
 require('codemirror/mode/yaml/yaml');
+require('codemirror-graphql/mode');

src/utils/cm-mode-imports.js

@@ -31,6 +31,7 @@ const modes = {
   erl: 'erlang',
   go: ['go', 'text/x-go'],
   gradle: 'groovy',
+  gql: 'graphql',
   handlebars: 'htmlmixed',
   hbs: 'htmlmixed',
   html: 'htmlmixed',

src/utils/modes.js

@@ -25,7 +25,9 @@ const codeTypes = {
   erl: 'Erlang',
   erlang: 'Erlang',
   go: 'Go',
+  gql: 'GraphQL',
   gradle: 'Gradle',
+  graphql: 'GraphQL',
   groovy: 'Groovy',
   handlebars: 'Handlebars',
   hbs: 'Handlebars',