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>

1 files changed, 37 insertions, 30 deletions

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 {