Server-side syntax highlighting for all code (#12047)

* Server-side syntax hilighting for all code

This PR does a few things:

* Remove all traces of highlight.js
* Use chroma library to provide fast syntax hilighting directly on the server
* Provide syntax hilighting for diffs
* Re-style both unified and split diffs views
* Add custom syntax hilighting styling for both regular and arc-green

Fixes #7729
Fixes #10157
Fixes #11825
Fixes #7728
Fixes #3872
Fixes #3682

And perhaps gets closer to #9553

* fix line marker

* fix repo search

* Fix single line select

* properly load settings

* npm uninstall highlight.js

* review suggestion

* code review

* forgot to call function

* fix test

* Apply suggestions from code review

suggestions from @silverwind thanks

Co-authored-by: silverwind <me@silverwind.io>

* code review

* copy/paste error

* Use const for highlight size limit

* Update web_src/less/_repository.less

Co-authored-by: Lauris BH <lauris@nix.lv>

* update size limit to 1MB and other styling tweaks

* fix highlighting for certain diff sections

* fix test

* add worker back as suggested

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lauris BH <lauris@nix.lv>

8 files changed, 826 insertions, 185 deletions

diff --git a/web_src/js/features/highlight.js b/web_src/js/features/highlight.js
deleted file mode 100644
index d3f6ba71b8..0000000000
--- a/web_src/js/features/highlight.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default async function highlight(elementOrNodeList) {
-  if (!window.config || !window.config.HighlightJS || !elementOrNodeList) return;
-  const nodes = 'length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList];
-  if (!nodes.length) return;
-
-  const {default: Worker} = await import(/* webpackChunkName: "highlight" */'./highlight.worker.js');
-  const worker = new Worker();
-
-  worker.addEventListener('message', ({data}) => {
-    const {index, html} = data;
-    nodes[index].outerHTML = html;
-  });
-
-  for (let index = 0; index < nodes.length; index++) {
-    const node = nodes[index];
-    if (!node) continue;
-    worker.postMessage({index, html: node.outerHTML});
-  }
-}
diff --git a/web_src/js/features/highlight.worker.js b/web_src/js/features/highlight.worker.js
deleted file mode 100644
index 4a0f55f441..0000000000
--- a/web_src/js/features/highlight.worker.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {highlightBlock} from 'highlight.js';
-import {createWindow} from 'domino';
-
-self.addEventListener('message', ({data}) => {
-  const window = createWindow();
-  self.document = window.document;
-
-  const {index, html} = data;
-  document.body.innerHTML = html;
-  highlightBlock(document.body.firstChild);
-  self.postMessage({index, html: document.body.innerHTML});
-});
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 544c2457c4..0cfba4c66a 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -16,7 +16,6 @@ import initMarkdownAnchors from './markdown/anchors.js';
 import attachTribute from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
-import highlight from './features/highlight.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {createCodeEditor} from './features/codeeditor.js';
@@ -46,9 +45,6 @@ function initCommentPreviewTab($form) {
     }, (data) => {
       const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
-      $('pre code', $previewPanel[0]).each(function () {
-        highlight(this);
-      });
     });
   });
 
@@ -78,9 +74,6 @@ function initEditPreviewTab($form) {
       }, (data) => {
         const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
-        $('pre code', $previewPanel[0]).each(function () {
-          highlight(this);
-        });
       });
     });
   }
@@ -986,9 +979,6 @@ async function initRepository() {
               $renderContent.html($('#no-content').html());
             } else {
               $renderContent.html(data.content);
-              $('pre code', $renderContent[0]).each(function () {
-                highlight(this);
-              });
             }
             const $content = $segment.parent();
             if (!$content.find('.ui.small.images').length) {
@@ -1345,9 +1335,6 @@ function initWikiForm() {
               wiki: true
             }, (data) => {
               preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
-              $(preview).find('pre code').each((_, e) => {
-                highlight(e);
-              });
             });
           };
           if (!simplemde.isSideBySideActive()) {
@@ -2003,27 +1990,27 @@ function searchRepositories() {
 }
 
 function initCodeView() {
-  if ($('.code-view .linenums').length > 0) {
+  if ($('.code-view .lines-num').length > 0) {
     $(document).on('click', '.lines-num span', function (e) {
       const $select = $(this);
-      const $list = $select.parent().siblings('.lines-code').find('ol.linenums > li');
+      const $list = $('.code-view td.lines-code');
       selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
       deSelect();
     });
 
     $(window).on('hashchange', () => {
       let m = window.location.hash.match(/^#(L\d+)-(L\d+)$/);
-      const $list = $('.code-view ol.linenums > li');
+      const $list = $('.code-view td.lines-code');
       let $first;
       if (m) {
-        $first = $list.filter(`.${m[1]}`);
-        selectRange($list, $first, $list.filter(`.${m[2]}`));
+        $first = $list.filter(`[rel=${m[1]}]`);
+        selectRange($list, $first, $list.filter(`[rel=${m[2]}]`));
         $('html, body').scrollTop($first.offset().top - 200);
         return;
       }
       m = window.location.hash.match(/^#(L|n)(\d+)$/);
       if (m) {
-        $first = $list.filter(`.L${m[2]}`);
+        $first = $list.filter(`[rel=L${m[2]}]`);
         selectRange($list, $first);
         $('html, body').scrollTop($first.offset().top - 200);
       }
@@ -2485,7 +2472,6 @@ $(document).ready(async () => {
 
   // parallel init of async loaded features
   await Promise.all([
-    highlight(document.querySelectorAll('pre code')),
     attachTribute(document.querySelectorAll('#content, .emoji-input')),
     initGitGraph(),
     initClipboard(),
@@ -2524,7 +2510,7 @@ function selectRange($list, $select, $from) {
       }
       const classes = [];
       for (let i = a; i <= b; i++) {
-        classes.push(`.L${i}`);
+        classes.push(`[rel=L${i}]`);
       }
       $list.filter(classes.join(',')).addClass('active');
       changeHash(`#L${a}-L${b}`);
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4afa95d7fa..5e11649d9a 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -875,12 +875,6 @@ footer {
     }
 }
 
-/* Overrides some styles of the Highlight.js plugin */
-.hljs {
-    background: inherit !important;
-    padding: 0 !important;
-}
-
 .ui.menu.new-menu {
     justify-content: center !important;
     padding-top: 15px !important;
@@ -1047,9 +1041,10 @@ i.icon.centerlock {
 }
 
 .lines-num {
+    padding-left: 10px;
+    padding-right: 10px;
     text-align: right !important;
-    color: #999999;
-    background: #f5f5f5;
+    color: rgba(27, 31, 35, .3);
     width: 1%;
     user-select: none;
 
@@ -1070,15 +1065,19 @@ i.icon.centerlock {
     }
 }
 
+.lines-type-marker {
+    vertical-align: top;
+}
+
 .lines-num,
 .lines-code {
-    padding: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
     vertical-align: top;
 
     pre,
-    ol,
-    .hljs {
-        background-color: white;
+    ol {
+        background-color: inherit;
         margin: 0;
         padding: 0 !important;
 
@@ -1090,6 +1089,15 @@ i.icon.centerlock {
     }
 }
 
+.blame .lines-num {
+    padding: 0 !important;
+    background-color: #f5f5f5;
+}
+
+.blame .lines-code {
+    padding: 0 !important;
+}
+
 .lines-commit {
     vertical-align: top;
     color: #999999;
@@ -1139,7 +1147,6 @@ i.icon.centerlock {
         border-bottom: 1px solid #eaecef;
     }
 }
-
 .code-view {
     overflow: auto;
     overflow-x: auto;
@@ -1161,9 +1168,10 @@ i.icon.centerlock {
         width: 100%;
     }
 
-    .lines-code .active {
-        background: #fff6af;
+    .lines-code.active {
+        background: #fffbdd !important;
     }
+
 }
 
 .octicon-tiny {
diff --git a/web_src/less/_chroma.less b/web_src/less/_chroma.less
new file mode 100644
index 0000000000..2940f17f3b
--- /dev/null
+++ b/web_src/less/_chroma.less
@@ -0,0 +1,380 @@
+/* Background */
+
+.chroma {
+    background-color: #ffffff;
+}
+/* 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: #e5e5e5;
+}
+/* LineNumbersTable */
+
+.chroma .lnt {
+    margin-right: .4em;
+    padding: 0 .4em;
+    color: #7f7f7f;
+}
+/* LineNumbers */
+
+.chroma .ln {
+    margin-right: .4em;
+    padding: 0 .4em;
+    color: #7f7f7f;
+}
+/* Keyword */
+
+.chroma .k {
+    color: #d73a49;
+}
+/* KeywordConstant */
+
+.chroma .kc {
+    color: #d73a49;
+}
+/* KeywordDeclaration */
+
+.chroma .kd {
+    color: #d73a49;
+}
+/* KeywordNamespace */
+
+.chroma .kn {
+    color: #d73a49;
+}
+/* KeywordPseudo */
+
+.chroma .kp {
+    color: #d73a49;
+}
+/* KeywordReserved */
+
+.chroma .kr {
+    color: #d73a49;
+}
+/* KeywordType */
+
+.chroma .kt {
+    color: #445588;
+}
+/* NameAttribute */
+
+.chroma .na {
+    color: #d73a49;
+}
+/* NameBuiltin */
+
+.chroma .nb {
+    color: #005cc5;
+}
+/* NameBuiltinPseudo */
+
+.chroma .bp {
+    color: #999999;
+}
+/* NameClass */
+
+.chroma .nc {
+    color: #445588;
+}
+/* NameConstant */
+
+.chroma .no {
+    color: #008080;
+}
+/* NameDecorator */
+
+.chroma .nd {
+    color: #3c5d5d;
+}
+/* NameEntity */
+
+.chroma .ni {
+    color: #6f42c1;
+}
+/* NameException */
+
+.chroma .ne {
+    color: #990000;
+}
+/* NameFunction */
+
+.chroma .nf {
+    color: #005cc5;
+}
+/* NameLabel */
+
+.chroma .nl {
+    color: #990000;
+}
+/* NameNamespace */
+
+.chroma .nn {
+    color: #555555;
+}
+/* NameOther */
+
+.chroma .nx {
+    color: #24292e;
+}
+/* NameTag */
+
+.chroma .nt {
+    color: #22863a;
+}
+/* NameVariable */
+
+.chroma .nv {
+    color: #008080;
+}
+/* NameVariableClass */
+
+.chroma .vc {
+    color: #008080;
+}
+/* NameVariableGlobal */
+
+.chroma .vg {
+    color: #008080;
+}
+/* NameVariableInstance */
+
+.chroma .vi {
+    color: #008080;
+}
+/* LiteralString */
+
+.chroma .s {
+    color: #032f62;
+}
+/* LiteralStringAffix */
+
+.chroma .sa {
+    color: #032f62;
+}
+/* LiteralStringBacktick */
+
+.chroma .sb {
+    color: #032f62;
+}
+/* LiteralStringChar */
+
+.chroma .sc {
+    color: #032f62;
+}
+/* LiteralStringDelimiter */
+
+.chroma .dl {
+    color: #032f62;
+}
+/* LiteralStringDoc */
+
+.chroma .sd {
+    color: #032f62;
+}
+/* LiteralStringDouble */
+
+.chroma .s2 {
+    color: #032f62;
+}
+/* LiteralStringEscape */
+
+.chroma .se {
+    color: #032f62;
+}
+/* LiteralStringHeredoc */
+
+.chroma .sh {
+    color: #032f62;
+}
+/* LiteralStringInterpol */
+
+.chroma .si {
+    color: #032f62;
+}
+/* LiteralStringOther */
+
+.chroma .sx {
+    color: #032f62;
+}
+/* LiteralStringRegex */
+
+.chroma .sr {
+    font-weight: bold;
+    color: #22863a;
+}
+/* LiteralStringSingle */
+
+.chroma .s1 {
+    color: #24292e;
+}
+/* LiteralStringSymbol */
+
+.chroma .ss {
+    color: #032f62;
+}
+/* LiteralNumber */
+
+.chroma .m {
+    color: #009999;
+}
+/* LiteralNumberBin */
+
+.chroma .mb {
+    color: #009999;
+}
+/* LiteralNumberFloat */
+
+.chroma .mf {
+    color: #009999;
+}
+/* LiteralNumberHex */
+
+.chroma .mh {
+    color: #009999;
+}
+/* LiteralNumberInteger */
+
+.chroma .mi {
+    color: #009999;
+}
+/* LiteralNumberIntegerLong */
+
+.chroma .il {
+    color: #009999;
+}
+/* LiteralNumberOct */
+
+.chroma .mo {
+    color: #009999;
+}
+/* Operator */
+
+.chroma .o {
+    color: #d73a49;
+}
+/* OperatorWord */
+
+.chroma .ow {
+    color: #d73a49;
+}
+/* Comment */
+
+.chroma .c {
+    color: #6a737d;
+}
+/* CommentHashbang */
+
+.chroma .ch {
+    color: #6a737d;
+}
+/* CommentMultiline */
+
+.chroma .cm {
+    color: #999988;
+}
+/* CommentSingle */
+
+.chroma .c1 {
+    color: #6a737d;
+}
+/* CommentSpecial */
+
+.chroma .cs {
+    color: #999999;
+    font-style: italic;
+}
+/* CommentPreproc */
+
+.chroma .cp {
+    color: #999999;
+}
+/* CommentPreprocFile */
+
+.chroma .cpf {
+    color: #999999;
+}
+/* GenericDeleted */
+
+.chroma .gd {
+    color: #000000;
+    background-color: #ffdddd;
+}
+/* GenericEmph */
+
+.chroma .ge {
+    color: #000000;
+    font-style: italic;
+}
+/* GenericError */
+
+.chroma .gr {
+    color: #aa0000;
+}
+/* GenericHeading */
+
+.chroma .gh {
+    color: #999999;
+}
+/* GenericInserted */
+
+.chroma .gi {
+    color: #000000;
+    background-color: #ddffdd;
+}
+/* GenericOutput */
+
+.chroma .go {
+    color: #888888;
+}
+/* GenericPrompt */
+
+.chroma .gp {
+    color: #555555;
+}
+/* GenericStrong */
+
+.chroma .gs {
+    font-weight: bold;
+}
+/* GenericSubheading */
+
+.chroma .gu {
+    color: #aaaaaa;
+}
+/* GenericTraceback */
+
+.chroma .gt {
+    color: #aa0000;
+}
+/* GenericUnderline */
+
+.chroma .gl {
+    text-decoration: underline;
+}
+/* TextWhitespace */
+
+.chroma .w {
+    color: #bbbbbb;
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9c5a3fc9a5..e986c41bf0 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1670,7 +1670,6 @@
             .lines-num {
                 text-align: right;
                 color: #a6a6a6;
-                background: #fafafa;
                 width: 1%;
                 min-width: 50px;
                 user-select: none;
@@ -1680,10 +1679,6 @@
                     text-align: center;
                 }
             }
-
-            .lines-num-old {
-                border-right: 1px solid #dddddd;
-            }
         }
 
         .code-diff {
@@ -1695,9 +1690,6 @@
             }
 
             .lines-num {
-                border-color: #d4d4d5;
-                border-right-width: 1px;
-                border-right-style: solid;
                 padding: 0 5px !important;
             }
 
@@ -1734,14 +1726,19 @@
 
         .code-diff-unified tbody tr {
             &.del-code td {
-                background-color: #ffe0e0 !important;
+                background-color: #ffeef0 !important;
                 border-color: #f1c0c0 !important;
             }
 
             &.add-code td {
-                background-color: #d6fcd6 !important;
-                border-color: #c1e9c1 !important;
+                background-color: #e6ffed;
+            }
+
+            &.add-code td.lines-num {
+                background-color: #cdffd8;
+                border-color: #bef5cb;
             }
+
         }
 
         .code-diff-split {
@@ -1760,28 +1757,35 @@
                 &.del-code td:nth-child(4),
                 &.del-code td:nth-child(5),
                 &.del-code td:nth-child(6) {
-                    background-color: #fafafa;
+                    background-color: #fafbfc;
+                    border-right-color: #eaecef;
                 }
 
-                &.del-code td:nth-child(1),
-                &.del-code td:nth-child(2),
-                &.del-code td:nth-child(3),
-                td.del-code {
-                    background-color: #ffe0e0 !important;
-                    border-color: #f1c0c0 !important;
+                &.del-code {
+                    background-color: #ffeef0;
                 }
 
-                &.add-code td:nth-child(4),
-                &.add-code td:nth-child(5),
-                &.add-code td:nth-child(6),
-                td.add-code {
-                    background-color: #d6fcd6 !important;
-                    border-color: #c1e9c1 !important;
+                &.del-code td.add-code {
+                    background-color: #e6ffed;
+                }
+                &.del-code td.lines-num-new.add-code {
+                    background-color: #cdffd8;
+                    border-color: #bef5cb;
+                }
+
+                &.add-code {
+                    background-color: #e6ffed;
+                    border-color: #bef5cb;
+                }
+
+                &.add-code td.lines-num-new {
+                    background-color: #cdffd8;
                 }
 
                 td:nth-child(4) {
                     border-left-width: 1px;
                     border-left-style: solid;
+                    border-left-color: #f6f8fa;
                 }
             }
         }
@@ -2995,14 +2999,17 @@ tbody.commit-list {
 
 .tag-code,
 .tag-code td {
-    background-color: #f0f0f0 !important;
-    border-color: #d3cfcf !important;
+    background-color: #e6f1f6;
+    border-color: #f1f8ff !important;
     padding-top: 8px;
     padding-bottom: 8px;
+    vertical-align: middle;
+    color: rgba(27, 31, 35, .7);
 }
 
-td.blob-excerpt {
-    background-color: #fafafa;
+.tag-code td.lines-num {
+    background-color: #f6e6eb !important;
+    border-color: #dbedff;
 }
 
 .issue-keyword {
@@ -3052,11 +3059,11 @@ td.blob-excerpt {
 }
 
 .removed-code {
-    background-color: #ff9999;
+    background-color: #fdb8c0;
 }
 
 .added-code {
-    background-color: #99ff99;
+    background-color: #acf2bd;
 }
 
 .repository .ui.menu.new-menu {
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 968ef8dbfa..83ebefc799 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -1,4 +1,3 @@
-@import "~highlight.js/styles/github.css";
 @import "./vendor/gitGraph.css";
 
 @import "_svg";
@@ -16,3 +15,4 @@
 @import "_admin";
 @import "_explore";
 @import "_review";
+@import "_chroma";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index a878764b85..5c313eb9f5 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1,69 +1,390 @@
-.hljs {
+/* Background */
+
+.chroma {
+    background-color: #2a2e3a;
+}
+/* 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;
-    overflow-x: auto;
-    padding: .5em;
-    color: #bababa;
 }
+/* LineHighlight */
 
-.hljs-strong,
-.hljs-emphasis {
-    color: #a8a8a2;
+.chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #3f424d;
 }
+/* LineNumbersTable */
 
-.hljs-bullet,
-.hljs-quote,
-.hljs-link,
-.hljs-number,
-.hljs-regexp,
-.hljs-literal {
-    color: #6896ba;
+.chroma .lnt {
+    margin-right: .4em;
+    padding: 0 .4em;
+    color: #7f7f7f;
 }
+/* LineNumbers */
 
-.hljs-code,
-.hljs-selector-class {
-    color: #a6e22e;
+.chroma .ln {
+    margin-right: .4em;
+    padding: 0 .4em;
+    color: #7f7f7f;
 }
+/* Keyword */
 
-.hljs-emphasis {
-    font-style: italic;
+.chroma .k {
+    color: #9daccc;
+    font-weight: bold;
 }
+/* KeywordConstant */
 
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-section,
-.hljs-attribute,
-.hljs-name,
-.hljs-variable {
-    color: #cb7832;
+.chroma .kc {
+    color: #9daccc;
+    font-weight: bold;
 }
+/* KeywordDeclaration */
 
-.hljs-params {
-    color: #b9b9b9;
+.chroma .kd {
+    color: #9daccc;
+    font-weight: bold;
 }
+/* KeywordNamespace */
 
-.hljs-string {
-    color: #6a8759;
+.chroma .kn {
+    color: #9daccc;
+    font-weight: bold;
 }
+/* KeywordPseudo */
 
-.hljs-subst,
-.hljs-type,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-symbol,
-.hljs-selector-id,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-addition {
+.chroma .kp {
+    color: #9daccc;
+    font-weight: bold;
+}
+/* KeywordReserved */
+
+.chroma .kr {
+    color: #9daccc;
+    font-weight: bold;
+}
+/* KeywordType */
+
+.chroma .kt {
+    color: #9daccc;
+    font-weight: bold;
+}
+/* NameAttribute */
+
+.chroma .na {
+    color: #8ff;
+}
+/* NameBuiltin */
+
+.chroma .nb {
     color: #e0c46c;
 }
+/* NameBuiltinPseudo */
+
+.chroma .bp {
+    color: #999999;
+}
+/* NameClass */
+
+.chroma .nc {
+    color: #445588;
+}
+/* NameConstant */
+
+.chroma .no {
+    color: #8ff;
+}
+/* NameDecorator */
+
+.chroma .nd {
+    color: #3c5d5d;
+}
+/* NameEntity */
+
+.chroma .ni {
+    color: #f8f;
+}
+/* NameException */
+
+.chroma .ne {
+    color: #f88;
+}
+/* NameFunction */
+
+.chroma .nf {
+    color: #986c88;
+}
+/* NameLabel */
+
+.chroma .nl {
+    color: #f88;
+}
+/* NameNamespace */
+
+.chroma .nn {
+    color: #555555;
+}
+/* NameOther */
+
+.chroma .nx {
+    color: #9daccc;
+}
+/* NameTag */
 
-.hljs-comment,
-.hljs-deletion,
-.hljs-meta {
+.chroma .nt {
+    color: #88f;
+}
+/* NameVariable */
+
+.chroma .nv {
+    color: #cb7832;
+}
+/* NameVariableClass */
+
+.chroma .vc {
+    color: #cb7832;
+}
+/* NameVariableGlobal */
+
+.chroma .vg {
+    color: #cb7832;
+}
+/* NameVariableInstance */
+
+.chroma .vi {
+    color: #cb7832;
+}
+/* LiteralString */
+
+.chroma .s {
+    color: #8ab398;
+}
+/* LiteralStringAffix */
+
+.chroma .sa {
+    color: #8ab398;
+}
+/* LiteralStringBacktick */
+
+.chroma .sb {
+    color: #8ab398;
+}
+/* LiteralStringChar */
+
+.chroma .sc {
+    color: #8ab398;
+}
+/* LiteralStringDelimiter */
+
+.chroma .dl {
+    color: #8ab398;
+}
+/* LiteralStringDoc */
+
+.chroma .sd {
+    color: #8ab398;
+}
+/* LiteralStringDouble */
+
+.chroma .s2 {
+    color: #8ab398;
+}
+/* LiteralStringEscape */
+
+.chroma .se {
+    color: #8ab398;
+}
+/* LiteralStringHeredoc */
+
+.chroma .sh {
+    color: #8ab398;
+}
+/* LiteralStringInterpol */
+
+.chroma .si {
+    color: #8ab398;
+}
+/* LiteralStringOther */
+
+.chroma .sx {
+    color: #8ab398;
+}
+/* LiteralStringRegex */
+
+.chroma .sr {
+    color: #6896ba;
+}
+/* LiteralStringSingle */
+
+.chroma .s1 {
+    color: #8ab398;
+}
+/* LiteralStringSymbol */
+
+.chroma .ss {
+    color: #6896ba;
+}
+/* LiteralNumber */
+
+.chroma .m {
+    color: #6896ba;
+}
+/* LiteralNumberBin */
+
+.chroma .mb {
+    color: #6896ba;
+}
+/* LiteralNumberFloat */
+
+.chroma .mf {
+    color: #6896ba;
+}
+/* LiteralNumberHex */
+
+.chroma .mh {
+    color: #6896ba;
+}
+/* LiteralNumberInteger */
+
+.chroma .mi {
+    color: #6896ba;
+}
+/* LiteralNumberIntegerLong */
+
+.chroma .il {
+    color: #6896ba;
+}
+/* LiteralNumberOct */
+
+.chroma .mo {
+    color: #6896ba;
+}
+/* Operator */
+
+.chroma .o {
+    color: #9daccc;
+}
+/* OperatorWord */
+
+.chroma .ow {
+    color: #9daccc;
+}
+/* Comment */
+
+.chroma .c {
+    color: #7f7f7f;
+}
+/* CommentHashbang */
+
+.chroma .ch {
+    color: #7f7f7f;
+}
+/* CommentMultiline */
+
+.chroma .cm {
+    color: #7f7f7f;
+}
+/* CommentSingle */
+
+.chroma .c1 {
+    color: #7f7f7f;
+}
+/* CommentSpecial */
+
+.chroma .cs {
+    color: #7f7f7f;
+    font-style: italic;
+}
+/* CommentPreproc */
+
+.chroma .cp {
+    color: #7f7f7f;
+}
+/* CommentPreprocFile */
+
+.chroma .cpf {
     color: #7f7f7f;
 }
+/* GenericDeleted */
+
+.chroma .gd {
+    color: #9e9e9e;
+    background-color: #ffdddd;
+}
+/* GenericEmph */
+
+.chroma .ge {
+    color: #9e9e9e;
+    font-style: italic;
+}
+/* GenericError */
+
+.chroma .gr {
+    color: #aa0000;
+}
+/* GenericHeading */
+
+.chroma .gh {
+    color: #999999;
+}
+/* GenericInserted */
+
+.chroma .gi {
+    color: #9e9e9e;
+    background-color: #ddffdd;
+}
+/* GenericOutput */
+
+.chroma .go {
+    color: #888888;
+}
+/* GenericPrompt */
+
+.chroma .gp {
+    color: #555555;
+}
+/* GenericStrong */
+
+.chroma .gs {
+    color: #a8a8a2;
+    font-weight: bold;
+}
+/* GenericSubheading */
+
+.chroma .gu {
+    color: #888;
+}
+/* GenericTraceback */
+
+.chroma .gt {
+    color: #aa0000;
+}
+/* GenericUnderline */
+
+.chroma .gl {
+    text-decoration: underline;
+}
+/* TextWhitespace */
+
+.chroma .w {
+    color: #bbbbbb;
+}
 
 .repository .ui.segment.sub-menu .list .item {
     color: #dbdbdb;
@@ -542,13 +863,6 @@ a.ui.basic.green.label:hover {
     }
 }
 
-.hljs,
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-    color: #9daccc;
-}
-
 .markdown:not(code) .highlight pre,
 .markdown:not(code) pre {
     background-color: #2a2e3a;
@@ -762,23 +1076,21 @@ a.ui.basic.green.label:hover {
     background-color: #3a523a;
 }
 
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-    color: #986c88;
-}
-
-.hljs-string,
-.hljs-doctag {
-    color: #8ab398;
-}
-
 .tag-code,
 .tag-code td {
     background: #242637 !important;
+
+}
+.tag-code td.lines-num {
+    background-color: #242637 !important;
     border-color: transparent !important;
 }
 
+.tag-code td.lines-type-marker,
+td.blob-hunk {
+    color: #dbdbdb !important;
+}
+
 .ui.vertical.menu .active.item {
     background: #4b5162;
 }
@@ -1047,24 +1359,10 @@ input {
     box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
 }
 
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-    color: #ef5e77;
-}
-
 .user.profile .ui.card .extra.content ul li:not(:last-child) {
     border-bottom: 1px solid #4c505c;
 }
 
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-    color: #bd84bf;
-}
-
 .ui.form .dropzone {
     border: 2px dashed #7f98ad;
     background-color: #2e323e;
@@ -1138,20 +1436,12 @@ input {
     border-color: #2d2d2d !important;
 }
 
-.lines-num pre,
-.lines-code pre,
-.lines-num ol,
-.lines-code ol,
-.lines-num .hljs,
-.lines-code .hljs {
-    background-color: #2a2e3a !important;
-}
 td.blob-excerpt {
     background-color: rgba(0, 0, 0, .15);
 }
 
-.code-view .lines-code .active {
-    background: #534d1b;
+.code-view .lines-code.active {
+    background: #534d1b !important;
 }
 
 a.ui.label:hover,
@@ -1256,7 +1546,8 @@ a.ui.labels .label:hover {
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(5),
 .repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(6),
-.repository .diff-file-box .code-diff-split tbody tr td.add-code {
+.repository .diff-file-box .code-diff-split tbody tr td.add-code,
+.repository .diff-file-box .code-diff-split tbody tr td.lines-num-new.add-code {
     background-color: #283e2d !important;
     border-color: #314a37 !important;
 }