Add custom BNF highlighter: code, CSS, example usage (#338)

Author: nvitucci

preview-src/code.adoc

@@ -210,3 +210,31 @@ var expandCollapseBlock = function (e) {
   }
 }
 ----
+
+== BNF syntax example
+
+=== Single-line rules
+
+[source, gql-bnf]
+----
+<simple match statement> ::= "MATCH" <graph pattern>
+<path pattern> ::= [ <identifier> "=" ] [ <path pattern prefix> ] <path pattern expression>
+----
+
+=== Multi-line rules
+
+[source, gql-bnf]
+----
+<simple match statement> ::=
+  "MATCH" <graph pattern> "{}"
+
+<graph pattern> ::=
+  [ <match mode> ] <path pattern> [ { "," <path pattern> }... ] [ <graph pattern where clause> ]
+
+<match mode> ::=
+    "REPEATABLE" { "ELEMENT" [ "BINDINGS" ] | "ELEMENTS" }
+  | "DIFFERENT" { "RELATIONSHIP" [ "BINDINGS" ] | "RELATIONSHIPS" }
+
+<path pattern> ::=
+  [ <identifier> "=" ] [ <path pattern prefix> ] <path pattern expression>
+----

src/css/highlight.css

@@ -54,6 +54,10 @@
   color: rgba(var(--colors-forest-40));
 }
 
+.hljs-operator {
+  color: rgba(var(--colors-neutral-50));
+}
+
 .hljs-symbol,
 .hljs-bullet {
   color: var(--color-indigo-800);

src/js/vendor/highlight.js

@@ -128,6 +128,34 @@
         ]
       }
     })
+    // Custom flavor of BNF syntax defined in GQL standard docs
+    hljs.registerLanguage('gql-bnf',
+      function gql_bnf(hljs) {
+        return {
+          name: 'Custom BNF syntax for GQL',
+          contains: [
+            {
+              // Use "attribute" for nonterminals as the included BNF/ABNF/EBNF do
+              className: 'attribute',
+              begin: /</,
+              end: />/
+            },
+            {
+              // It should be enough to treat syntax extension symbols just as simple operators.
+              // Symbols include:
+              // - Square brackets (optional elements)
+              // - Braces (element group)
+              // - Vertical bar (alternative operator)
+              // - Ellipsis (element repetition)
+              className: 'operator',
+              begin: /[[\]{}|]|\.\.\./
+            },
+            // Double quote-delimited strings
+            hljs.QUOTE_STRING_MODE,
+            hljs.C_LINE_COMMENT_MODE
+          ]
+        };
+      })
   hljs.highlightAll()
 
   // Apply line highlighting to lines marked with `// marked-line`