From 7cd7fbd67d9f2b55eb221442f444d0da5401da65 Mon Sep 17 00:00:00 2001
From: Nicola Vitucci <nicola.vitucci@neo4j.com>
Date: Tue, 24 Jun 2025 11:21:33 +0100
Subject: [PATCH 1/2] Add custom BNF language: code, CSS, example usage

---
 preview-src/code.adoc      | 28 ++++++++++++++++++++++++++++
 src/css/highlight.css      |  4 ++++
 src/js/vendor/highlight.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+)

diff --git a/preview-src/code.adoc b/preview-src/code.adoc
index f8ce8738..6bb2cb65 100644
--- a/preview-src/code.adoc
+++ b/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>
+----
\ No newline at end of file
diff --git a/src/css/highlight.css b/src/css/highlight.css
index 0ebdc97e..dd83fb9b 100644
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -54,6 +54,10 @@
   color: rgba(var(--colors-forest-40));
 }
 
+.hljs-operator {
+  color: rgba(var(--colors-neutral-60));
+}
+
 .hljs-symbol,
 .hljs-bullet {
   color: var(--color-indigo-800);
diff --git a/src/js/vendor/highlight.js b/src/js/vendor/highlight.js
index 870e08e2..c0598438 100644
--- a/src/js/vendor/highlight.js
+++ b/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`

From 6768e19157d65da75186fd7828cf47949f4a854b Mon Sep 17 00:00:00 2001
From: Nicola Vitucci <nicola.vitucci@neo4j.com>
Date: Thu, 24 Jul 2025 13:54:34 +0100
Subject: [PATCH 2/2] Change operator color

---
 src/css/highlight.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/highlight.css b/src/css/highlight.css
index dd83fb9b..c3d32463 100644
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -55,7 +55,7 @@
 }
 
 .hljs-operator {
-  color: rgba(var(--colors-neutral-60));
+  color: rgba(var(--colors-neutral-50));
 }
 
 .hljs-symbol,