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>
This commit is contained in:
mrsdizzie 2020-06-30 17:34:03 -04:00 committed by GitHub
parent ce5f2b9845
commit af7ffaa279
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
336 changed files with 37293 additions and 769 deletions

View file

@ -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 {

380
web_src/less/_chroma.less Normal file
View file

@ -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;
}

View file

@ -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 {

View file

@ -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";

View file

@ -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 */
.hljs-comment,
.hljs-deletion,
.hljs-meta {
.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 */
.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;
}