diff --git a/exampleSite/content/tests/code/_index.en.md b/exampleSite/content/tests/code/_index.en.md
index 2788ccda21..ce194f9e5e 100644
--- a/exampleSite/content/tests/code/_index.en.md
+++ b/exampleSite/content/tests/code/_index.en.md
@@ -56,7 +56,7 @@ Some preformatted stuff in HTML elements
 
 #### %%
 
-{{% highlight json "linenos=inline" %}}
+{{% highlight json "linenos=inline,hl_lines=1 2,anchorlinenos=true" %}}
 {
   "Hello": "World" "Hello": "World" "Hello": "World"
 }
@@ -64,7 +64,7 @@ Some preformatted stuff in HTML elements
 
 #### <>
 
-{{< highlight json "linenos=table" >}}
+{{< highlight json "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
 {
   "Hello": "World" "Hello": "World" "Hello": "World"
 }
@@ -75,32 +75,40 @@ Some preformatted stuff in HTML elements
 #### %% %%
 
 {{% tab title="json" %}}
-{{% highlight html "linenos=true" %}}
-<p>my code</p>
+{{% highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{% /highlight %}}
 {{% /tab %}}
 
 #### %% <>
 
 {{% tab title="json" %}}
-{{< highlight html "linenos=true" >}}
-<p>my code</p>
+{{< highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{< /highlight >}}
 {{% /tab %}}
 
 #### <> %%
 
 {{< tab title="json" >}}
-{{% highlight html "linenos=true" %}}
-<p>my code</p>
+{{% highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{% /highlight %}}
 {{< /tab >}}
 
 #### <> <>
 
 {{< tab title="json" >}}
-{{< highlight html "linenos=true" >}}
-<p>my code</p>
+{{< highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{< /highlight >}}
 {{< /tab >}}
 
@@ -110,8 +118,10 @@ Some preformatted stuff in HTML elements
 
 {{% tabs %}}
 {{% tab title="json" %}}
-{{% highlight html "linenos=true" %}}
-<p>my code</p>
+{{% highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{% /highlight %}}
 {{% /tab %}}
 {{% /tabs %}}
@@ -120,8 +130,10 @@ Some preformatted stuff in HTML elements
 
 {{% tabs %}}
 {{% tab title="json" %}}
-{{< highlight html "linenos=true" >}}
-<p>my code</p>
+{{< highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{< /highlight >}}
 {{% /tab %}}
 {{% /tabs %}}
@@ -130,8 +142,10 @@ Some preformatted stuff in HTML elements
 
 {{% tabs %}}
 {{< tab title="json" >}}
-{{% highlight html "linenos=true" %}}
-<p>my code</p>
+{{% highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{% /highlight %}}
 {{< /tab >}}
 {{% /tabs %}}
@@ -140,8 +154,10 @@ Some preformatted stuff in HTML elements
 
 {{% tabs %}}
 {{< tab title="json" >}}
-{{< highlight html "linenos=true" >}}
-<p>my code</p>
+{{< highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{< /highlight >}}
 {{< /tab >}}
 {{% /tabs %}}
@@ -150,8 +166,10 @@ Some preformatted stuff in HTML elements
 
 {{< tabs >}}
 {{% tab title="json" %}}
-{{% highlight html "linenos=true" %}}
-<p>my code</p>
+{{% highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{% /highlight %}}
 {{% /tab %}}
 {{< /tabs >}}
@@ -160,8 +178,10 @@ Some preformatted stuff in HTML elements
 
 {{< tabs >}}
 {{% tab title="json" %}}
-{{< highlight html "linenos=true" >}}
-<p>my code</p>
+{{< highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{< /highlight >}}
 {{% /tab %}}
 {{< /tabs >}}
@@ -170,8 +190,10 @@ Some preformatted stuff in HTML elements
 
 {{< tabs >}}
 {{< tab title="json" >}}
-{{% highlight html "linenos=true" %}}
-<p>my code</p>
+{{% highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" %}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{% /highlight %}}
 {{< /tab >}}
 {{< /tabs >}}
@@ -180,8 +202,10 @@ Some preformatted stuff in HTML elements
 
 {{< tabs >}}
 {{< tab title="json" >}}
-{{< highlight html "linenos=true" >}}
-<p>my code</p>
+{{< highlight html "linenos=table,hl_lines=1 2,anchorlinenos=true" >}}
+{
+  "Hello": "World" "Hello": "World" "Hello": "World"
+}
 {{< /highlight >}}
 {{< /tab >}}
 {{< /tabs >}}
diff --git a/static/css/chroma-learn.css b/static/css/chroma-learn.css
index 06eac5fef9..7064391bc0 100644
--- a/static/css/chroma-learn.css
+++ b/static/css/chroma-learn.css
@@ -1,12 +1,17 @@
-/* based on base16-snazzy
-/* Background */ .chroma { color: #e2e4e5; background-color: #282a36 }
+/* based on base16-snazzy */
+/* Background */ .bg { color: #e2e4e5; background-color: #282a36; }
+/* PreWrapper */ .chroma { color: #e2e4e5; background-color: #282a36; }
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err { color: #ff5c57 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #505050 }
+/* 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: #7f7f7f }
+/* 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: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+f7f7f }
 /* Keyword */ .chroma .k { color: #ff6ac1 }
 /* KeywordConstant */ .chroma .kc { color: #ff6ac1 }
 /* KeywordDeclaration */ .chroma .kd { color: #ff5c57 }
diff --git a/static/css/chroma-neon.css b/static/css/chroma-neon.css
index 3f7c7c8d27..e6746bdf4f 100644
--- a/static/css/chroma-neon.css
+++ b/static/css/chroma-neon.css
@@ -2,15 +2,19 @@
    ignore this variant in IE completely */
 @supports not (-ms-high-contrast:none) {
 
-/* based on rrt
-/* Background */ .chroma { color: #f8f8f2; background-color: #000000 }
+/* based on rrt */
+/* Background */ .bg { color: #f8f8f2; background-color: #000000; }
+/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #000000; }
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err {  }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7c7c79 }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7c7c79 }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #363638 }
+/* 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: #7c7c79 }
+/* 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: #7c7c79 }
+/* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #ff0000 }
 /* KeywordConstant */ .chroma .kc { color: #ff0000 }
 /* KeywordDeclaration */ .chroma .kd { color: #ff0000 }
diff --git a/static/css/chroma-relearn-dark.css b/static/css/chroma-relearn-dark.css
index 0ecb3c7b4b..620b13e5b2 100644
--- a/static/css/chroma-relearn-dark.css
+++ b/static/css/chroma-relearn-dark.css
@@ -1,12 +1,16 @@
-/* based on monokai
-/* Background */ .chroma { color: #f8f8f8; background-color: #2b2b2b }
+/* based on monokai */
+/* Background */ .bg { color: #f8f8f2; background-color: #2b2b2b; }
+/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #2b2b2b; }
 /* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #960050; }
+/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #404042 }
+/* 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: #7f7f7f }
+/* 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: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #66d9ef }
 /* KeywordConstant */ .chroma .kc { color: #66d9ef }
 /* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
@@ -61,13 +65,13 @@
 /* Operator */ .chroma .o { color: #f92672 }
 /* OperatorWord */ .chroma .ow { color: #f92672 }
 /* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #7c7c7c }
-/* CommentHashbang */ .chroma .ch { color: #7c7c7c }
-/* CommentMultiline */ .chroma .cm { color: #7c7c7c }
-/* CommentSingle */ .chroma .c1 { color: #7c7c7c }
-/* CommentSpecial */ .chroma .cs { color: #7c7c7c }
-/* CommentPreproc */ .chroma .cp { color: #7c7c7c }
-/* CommentPreprocFile */ .chroma .cpf { color: #7c7c7c }
+/* Comment */ .chroma .c { color: #75715e }
+/* CommentHashbang */ .chroma .ch { color: #75715e }
+/* CommentMultiline */ .chroma .cm { color: #75715e }
+/* CommentSingle */ .chroma .c1 { color: #75715e }
+/* CommentSpecial */ .chroma .cs { color: #75715e }
+/* CommentPreproc */ .chroma .cp { color: #75715e }
+/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
 /* Generic */ .chroma .g {  }
 /* GenericDeleted */ .chroma .gd { color: #f92672 }
 /* GenericEmph */ .chroma .ge { font-style: italic }
@@ -77,7 +81,7 @@
 /* GenericOutput */ .chroma .go {  }
 /* GenericPrompt */ .chroma .gp {  }
 /* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #7c7c7c }
+/* GenericSubheading */ .chroma .gu { color: #75715e }
 /* GenericTraceback */ .chroma .gt {  }
 /* GenericUnderline */ .chroma .gl {  }
 /* TextWhitespace */ .chroma .w {  }
diff --git a/static/css/chroma-relearn-light.css b/static/css/chroma-relearn-light.css
index 44bc9890ef..16d744f232 100644
--- a/static/css/chroma-relearn-light.css
+++ b/static/css/chroma-relearn-light.css
@@ -1,12 +1,16 @@
-/* based on tango
-/* Background */ .chroma { background-color: #f8f8f8 }
+/* based on tango */
+/* Background */ .bg { background-color: #f8f8f8; }
+/* PreWrapper */ .chroma { background-color: #f8f8f8; }
 /* Other */ .chroma .x { color: #000000 }
 /* Error */ .chroma .err { color: #a40000 }
+/* CodeLine */ .chroma .cl {  }
+/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* 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: #7f7f7f }
+/* 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: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #204a87; font-weight: bold }
 /* KeywordConstant */ .chroma .kc { color: #204a87; font-weight: bold }
 /* KeywordDeclaration */ .chroma .kd { color: #204a87; font-weight: bold }