Improve code block highlighting

README.md

@@ -27,7 +27,7 @@ into the pages, please see the [`_code/EMBEDDING.md`](_code/EMBEDDING.md) file.
 1. Install [Java JDK] version `11` to build the site.
 2. Install [Go][go] at least version `1.12`.
 3. Install [Node.js][nodejs]. Its version should be `18+`.
-4. Install [Hugo Extended][hugo-quick-start] at least version `v0.145` or higher.
+4. Install [Hugo Extended][hugo-quick-start] at least version `v0.150.0` or higher.
 5. Get access to the [`site-commons`][site-commons] repository from the admins
    to be able to download the theme.
 6. Make sure [SSH][site-commons-ssh] is configured correctly and the passphrase 

docs/assets/scss/docs-common/code/_code.scss

@@ -35,7 +35,7 @@
   --code-block-text-color: #a9b7c6;
   --code-block-box-shadow: unset;
   --code-block-header-divider-color: rgba(255, 255, 255, .08);
-  --code-block-highlighted-line-bg: #2c3035;
+  --code-block-highlighted-line-bg: #383636;
   --copy-code-icon-color: #{$gray-600};
   --copy-code-icon-hover-color: rgba(255, 255, 255, .8);
   --code-tab-color: #{$gray-600};

docs/assets/scss/docs/modules/_article-container.scss

@@ -59,22 +59,32 @@ $article-container-min-height: 460px;
   }
 
   .highlight {
-    pre {
-      border-radius: 0;
+    // Applies negative margins only to the parent `chroma` element.
+    // Useful for the default and table views with the numbered lines.
+    > .chroma {
       margin-right: calc(var(--code-block-padding) * -1);
       margin-left: calc(var(--code-block-padding) * -1);
+    }
+
+    pre {
+      border-radius: 0 !important;
 
       code {
         padding-right: var(--code-block-padding);
         padding-left: var(--code-block-padding);
       }
     }
+
+    .hl {
+      margin: 0 calc(var(--code-block-padding) * -1);
+      padding: 0 var(--code-block-padding);
+    }
   }
 
   li {
     .highlight {
-      pre {
-        border-radius: $code-block-border-radius;
+      > .chroma {
+        border-radius: $code-block-border-radius !important;
         margin-left: unset;
         margin-right: unset;
 

docs/content/docs/1/introduction/naming-conventions.md

@@ -29,34 +29,30 @@ We find it convenient to define ID types in one file called `identifiers.proto`.
 A typical project is likely to have more than one Bounded Context. Thus, you will have several
 `identifiers.proto` files. 
 Each of them resides under the directory with proto files defining the data model of the
-corresponding Bounded Context. For example:
-
-<div class="highlighter-rouge">
-<pre class="highlight">
-<code>
-    myproject/
-      users/
-        src/
-          main/
-            java/
-            proto/
-              user.proto
-              group.proto
-              ...
-              <span class="kd">identifiers.proto</span>
-      tasks/
-        src/
-          main/
-            java/    
-            proto/
-              task.proto
-              project.proto
-              ...
-              <span class="kd">identifiers.proto</span>
-        ...
-</code>
-</pre>
-</div>
+corresponding Bounded Context. For&nbsp;example:
+
+{{< highlight class="hl-text-only" lang="text" params="hl_lines=10 19" >}}
+myproject/
+  users/
+    src/
+      main/
+        java/
+        proto/
+          user.proto
+          group.proto
+          ...
+          identifiers.proto
+  tasks/
+    src/
+      main/
+        java/    
+        proto/
+          task.proto
+          project.proto
+          ...
+          identifiers.proto
+    ...
+{{< /highlight >}}
 
 ### `commands.proto`
 

docs/content/docs/1/introduction/project-structure.md

@@ -19,7 +19,7 @@ the code generation done by Protobuf Compiler and Spine Model Compiler.
 Following standard Gradle conventions a manually written code is created under the 
 `src/main/` directory with subdirectories `proto`, `java`, etc. for corresponding languages.
 
-After a project is defined in Gradle, a work on a module usually starts in the  
+After a project is defined in Gradle, a work on a module usually starts in 
 the `proto` directory.
 
 ## Generated code

docs/layouts/_shortcodes/highlight.html

@@ -7,11 +7,15 @@
   * `lang`. The language of the code block.
   * `params`. Optional standard Hugo highlighting parameters as a string.
   * `file`. An optional name of the code file to display on the code header panel.
+  * `class`. An optional class name that the code block will be wrapped in.
+
+See more in the `https://github.com/SpineEventEngine/SpineEventEngine.github.io/blob/master/AUTHORING.md`.
 */ -}}
 
 {{ $lang := .Get "lang" }}
 {{ $params := .Get "params" }}
 {{ $file := .Get "file" }}
+{{ $class := .Get "class" }}
 
 <!-- This condition is copied from the original Hugo's template. -->
 {{ $code := "" }}
@@ -22,7 +26,7 @@
 {{ end }}
 
 {{ if $file }}
-    <div class="code-block">
+    <div class="code-block {{ $class }}">
         <div class="code-block-header">
             <div class="file-name">
                 <span>{{ $file }}</span>
@@ -32,6 +36,10 @@
             {{ $code }}
         </div>
     </div>
+{{ else if $class }}
+    <div class="{{ $class }}">
+        {{ $code }}
+    </div>
 {{ else }}
     {{ $code }}
 {{ end }}

docs/static/code-theme/dark.css

@@ -38,10 +38,11 @@
 /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
 /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
 /* LineHighlight */ .chroma .hl { background-color: var(--code-block-highlighted-line-bg); }
+/* LineHighlight */ .hl-text-only .chroma .hl { background-color: transparent; color: #f0883e; font-weight: bold; }
 /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
 /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
 /* Line */ .chroma .line { display:flex; }
-/* Keyword */ .chroma .k { color:#ce8e6d }
+/* Keyword */ .chroma .k { color:#f0883e }
 /* KeywordConstant */ .chroma .kc { color:#79c0ff }
 /* KeywordDeclaration */ .chroma .kd { color:#f0883e }
 /* KeywordNamespace */ .chroma .kn { color:#f0883e }
@@ -56,7 +57,7 @@
 /* NameEntity */ .chroma .ni { color:#ffa657 }
 /* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
 /* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
-/* NameNamespace */ .chroma .nn { color:#ff7b72 }
+/* NameNamespace */ .chroma .nn { color:#a9b7c6 }
 /* NameOther */ .chroma .nx {  }
 /* NameProperty */ .chroma .py { color:#79c0ff }
 /* NameTag */ .chroma .nt { color:#7ee787 }
@@ -72,19 +73,19 @@
 /* Literal */ .chroma .l { color:#a5d6ff }
 /* LiteralDate */ .chroma .ld { color:#79c0ff }
 /* LiteralString */ .chroma .s { color:#6aab73 }
-/* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
-/* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
-/* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
-/* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
-/* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color:#6aab73 }
+/* LiteralStringBacktick */ .chroma .sb { color:#6aab73 }
+/* LiteralStringChar */ .chroma .sc { color:#6aab73 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#6aab73 }
+/* LiteralStringDoc */ .chroma .sd { color:#6aab73 }
 /* LiteralStringDouble */ .chroma .s2 { color:#6aab73 }
-/* LiteralStringEscape */ .chroma .se { color:#79c0ff }
-/* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
-/* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
-/* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
-/* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
-/* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
-/* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color:#6aab73 }
+/* LiteralStringHeredoc */ .chroma .sh { color:#6aab73 }
+/* LiteralStringInterpol */ .chroma .si { color:#6aab73 }
+/* LiteralStringOther */ .chroma .sx { color:#6aab73 }
+/* LiteralStringRegex */ .chroma .sr { color:#6aab73 }
+/* LiteralStringSingle */ .chroma .s1 { color:#6aab73 }
+/* LiteralStringSymbol */ .chroma .ss { color:#6aab73 }
 /* LiteralNumber */ .chroma .m { color:#a5d6ff }
 /* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
 /* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }

docs/static/code-theme/light.css

@@ -38,6 +38,7 @@
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 /* LineHighlight */ .chroma .hl { background-color: var(--code-block-highlighted-line-bg); }
+/* LineHighlight */ .hl-text-only .chroma .hl { background-color: transparent; color: #000080; font-weight: bold; }
 /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* Line */ .chroma .line { display: flex; }