Support for line highlighting in code blocks (#206)

(Color comes from Needle, but cannot use the css color vars directly
because they embed an opacity of 1, which we want to be 0.5)

Author: stefano-ottolenghi

preview-src/code.adoc

@@ -47,6 +47,30 @@ line of code <!--4-->
 <4> A callout behind a line comment for XML or SGML languages like HTML.
 
 
+== Highlight lines
+
+Highlight one or more lines of code by adding e.g. `//mark-line` at the end of each of them. Use the line comment syntax for the language the block contains.
+
+[source, adoc]
+----
+[source, java]
+---
+var result = driver.executableQuery("MATCH (p:Person {name: $name})")
+    .withParameters(Map.of("name", "Alice"))  //mark-line
+    .withConfig(QueryConfig.builder().withDatabase("neo4j").build())
+    .execute();
+---
+----
+
+[source, java]
+----
+var result = driver.executableQuery("MATCH (p:Person {name: $name})")
+    .withParameters(Map.of("name", "Alice"))  //mark-line
+    .withConfig(QueryConfig.builder().withDatabase("neo4j").build())
+    .execute();
+----
+
+
 == Expand code block
 
 Code blocks longer than 15 lines (+5 of tolerance) are collapsed, unless you add `role=nocollapse`

src/css/code.css

@@ -367,4 +367,8 @@
   .code-walkthrough .toc {
     display: none;
   }
+
+  .highlight .highlight-line {
+    background: var(--mark-background);
+  }
 }

src/css/vars.css

@@ -251,7 +251,7 @@
   --tip-background-color: rgba(var(--theme-light-palette-primary-bg-weak));
   --warning-color: rgba(var(--theme-light-palette-danger-bg-strong));
   --warning-background-color: rgba(var(--theme-light-palette-danger-bg-weak));
-  --mark-background: rgba(var(--colors-highlights-yellow));
+  --mark-background: rgba(247 151 103 / 0.3);
 
   /* success */
   --success-color: rgba(var(--theme-light-palette-success-bg-strong));

src/js/vendor/highlight.js

@@ -128,4 +128,12 @@
       }
     })
   hljs.highlightAll()
+
+  // Apply line highlighting to lines marked with `// marked-line`
+  // eat away line breaks or they would be doubled by the div
+  hljs.addPlugin({
+    'after:highlightElement': ({ el, result, text }) => {
+      result.value = result.value.replaceAll(/^(\s*)(.+?)\s*<span class="hljs-comment">.*?\bmark-line\b.*?<\/span>\n/mg, '<div class="highlight-line">$1$2</div>')
+    }
+  });
 })()