diff --git a/preview-src/code.adoc b/preview-src/code.adoc index 7c4cd523..75ff16f0 100644 --- a/preview-src/code.adoc +++ b/preview-src/code.adoc @@ -47,6 +47,30 @@ line of code <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` diff --git a/src/css/code.css b/src/css/code.css index 875697eb..e6f654ce 100644 --- a/src/css/code.css +++ b/src/css/code.css @@ -367,4 +367,8 @@ .code-walkthrough .toc { display: none; } + + .highlight .highlight-line { + background: var(--mark-background); + } } diff --git a/src/css/vars.css b/src/css/vars.css index e70d34f4..1acd82c2 100644 --- a/src/css/vars.css +++ b/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)); diff --git a/src/js/vendor/highlight.js b/src/js/vendor/highlight.js index 81e485f2..bee0fdff 100644 --- a/src/js/vendor/highlight.js +++ b/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*.*?\bmark-line\b.*?<\/span>\n/mg, '
$1$2
') + } + }); })()