From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 17 Jul 2019 15:45:46 +0000 (+0100)
Subject: CSS: Import code highlighting and base it on our colour scheme
X-Git-Url: http://git.ipfire.org/?p=ipfire.org.git;a=commitdiff_plain;h=e7e7c439453e12b962ddfa1a7b4c6fa465548e54

CSS: Import code highlighting and base it on our colour scheme

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/Makefile.am b/Makefile.am
index ef2256fc..35ddbf53 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -301,6 +301,7 @@ templates_wiki_modulesdir = $(templates_wikidir)/modules
 
 SCSS_FILES = \
 	src/scss/style.scss \
+	src/scss/_code-highlighting.scss \
 	src/scss/_fonts.scss \
 	src/scss/_icons.scss \
 	src/scss/_variables.scss
diff --git a/src/scss/_code-highlighting.scss b/src/scss/_code-highlighting.scss
new file mode 100644
index 00000000..927aa028
--- /dev/null
+++ b/src/scss/_code-highlighting.scss
@@ -0,0 +1,230 @@
+.codehilite {
+	.hll {
+		background-color: #ffffcc;
+	}
+
+	/*
+		Comment, Comment.Hashbang, Comment.Multiline, Comment.PreprocFile,
+		Comment.Single, Comment.Special
+	*/
+	.c, .ch, .cm, .cpf, .c1, .cs, .ch {
+		color: $gray-400;
+		font-style: italic;
+	}
+
+	/* Comment.Preproc */
+	.cp {
+		color: $gray-800;
+	}
+
+	/* Error */
+	.err {
+		border: 1px solid $red;
+	}
+
+	/* Keyword */
+	.k {
+		color: $cyan;
+		font-weight: bold;
+	}
+
+	/* Operator */
+	.o {
+		color: $gray-400;
+	}
+
+	/* Generic.Deleted */
+	.gd {
+		color: $red;
+	}
+
+	/* Generic.Emph */
+	.ge {
+		font-style: italic;
+	}
+
+	/* Generic.Strong */
+	.gs {
+		font-weight: bold;
+	}
+
+	/* Generic.Error */
+	.gr {
+		color: $red;
+	}
+
+	/* Generic.Heading */
+	.gh {
+		color: $secondary;
+		font-weight: bold;
+	}
+
+	/* Generic.Subheading */
+	.gu {
+		color: $secondary;
+		font-weight: bold;
+	}
+
+	/* Generic.Inserted */
+	.gi {
+		color: $green;
+	}
+
+	/* Generic.Output */
+	.go {
+		color: $gray-800;
+	}
+
+	/* Generic.Prompt */
+	.gp {
+		color: $blue;
+		font-weight: bold;
+	}
+
+	/* Generic.Traceback */
+	.gt {
+		color: $blue;
+	}
+
+	/* Keyword.Constant, Keyword.Declaration, Keyword.Namespace, Keyword.Reserved */
+	.kc, .kd, .kn, .kr {
+		color: $cyan;
+		font-weight: bold;
+	}
+
+	/* Keyword.Pseudo */
+	.kp {
+		color: $cyan;
+	}
+
+	/* Keyword.Type */
+	.kt {
+		color: $red;
+	}
+
+	/*
+		Literal.Number, Literal.Number.*
+	*/
+	.m, .mb, .mf, .mh, .mi, .mo, .il {
+		color: $gray-800;
+	}
+
+	/* Literal.String, Literal.String.* */
+	.s, .sa, .sb, .sc, .dl, .s1, .s2, .sh, {
+		color: $red;
+	}
+
+	/* Literal.String.Doc */
+	.sd {
+		color: $red;
+		font-style: italic;
+	}
+
+	/* Literal.String.Escape */
+	.se {
+		color: $yellow;
+		font-weight: bold;
+	}
+
+	/* Literal.String.Interpol */
+	.si {
+		color: $yellow;
+		font-weight: bold;
+	}
+
+	/* Literal.String.Other */
+	.sx {
+		color: $cyan;
+	}
+
+	/* Literal.String.Regex */
+	.sr {
+		color: $cyan;
+	}
+
+	/* Literal.String.Symbol */
+	.ss {
+		color: $cyan;
+	}
+
+	/* Name.Attribute */
+	.na {
+		color: $yellow;
+	}
+
+	/* Name.Builtin, Name.Builtin.Pseudo */
+	.nb, .bp {
+		color: $cyan;
+	}
+
+	/* Name.Class */
+	.nc {
+		color: $blue;
+		font-weight: bold;
+	}
+
+	/* Name.Constant */
+	.no {
+		color: $red;
+	}
+
+	/* Name.Decorator */
+	.nd {
+		color: $purple;
+	}
+
+	/* Name.Entity */
+	.ni {
+		color: $gray-800;
+		font-weight: bold;
+	}
+
+	/* Name.Exception */
+	.ne {
+		color: $red;
+		font-weight: bold;
+	}
+
+	/* Name.Function */
+	.nf {
+		color: $cyan;
+	}
+
+	/* Name.Label */
+	.nl {
+		color: $yellow;
+	}
+
+	/* Name.Namespace */
+	.nn {
+		color: $cyan;
+		font-weight: bold;
+	}
+
+	/* Name.Tag */
+	.nt {
+		color: $yellow;
+		font-weight: bold;
+	}
+
+	/* Name.Variable */
+	.nv, .vg, .vi, .vm {
+		color: $white;
+	}
+
+	/* Operator.Word */
+	.ow {
+		color: $purple;
+		font-weight: bold;
+	}
+
+	/* Text.Whitespace */
+	.w {
+		color: $gray-400;
+	}
+
+	/* Name.Function.Magic */
+	.fm {
+		color: $cyan;
+	}
+}
diff --git a/src/scss/code-highlighting.css b/src/scss/code-highlighting.css
deleted file mode 100644
index bf82aedc..00000000
--- a/src/scss/code-highlighting.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.codehilite .hll { background-color: #ffffcc }
-.codehilite  { background: #f8f8f8; }
-.codehilite .c { color: #408080; font-style: italic } /* Comment */
-.codehilite .err { border: 1px solid #FF0000 } /* Error */
-.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
-.codehilite .o { color: #666666 } /* Operator */
-.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
-.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
-.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
-.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
-.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
-.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
-.codehilite .gd { color: #A00000 } /* Generic.Deleted */
-.codehilite .ge { font-style: italic } /* Generic.Emph */
-.codehilite .gr { color: #FF0000 } /* Generic.Error */
-.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.codehilite .gi { color: #00A000 } /* Generic.Inserted */
-.codehilite .go { color: #888888 } /* Generic.Output */
-.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
-.codehilite .gs { font-weight: bold } /* Generic.Strong */
-.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.codehilite .gt { color: #0044DD } /* Generic.Traceback */
-.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
-.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
-.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
-.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
-.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
-.codehilite .kt { color: #B00040 } /* Keyword.Type */
-.codehilite .m { color: #666666 } /* Literal.Number */
-.codehilite .s { color: #BA2121 } /* Literal.String */
-.codehilite .na { color: #7D9029 } /* Name.Attribute */
-.codehilite .nb { color: #008000 } /* Name.Builtin */
-.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
-.codehilite .no { color: #880000 } /* Name.Constant */
-.codehilite .nd { color: #AA22FF } /* Name.Decorator */
-.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
-.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
-.codehilite .nf { color: #0000FF } /* Name.Function */
-.codehilite .nl { color: #A0A000 } /* Name.Label */
-.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
-.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
-.codehilite .nv { color: #19177C } /* Name.Variable */
-.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
-.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
-.codehilite .mf { color: #666666 } /* Literal.Number.Float */
-.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
-.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
-.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
-.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
-.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
-.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
-.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
-.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
-.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
-.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
-.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
-.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
-.codehilite .sx { color: #008000 } /* Literal.String.Other */
-.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
-.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
-.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
-.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
-.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
-.codehilite .vc { color: #19177C } /* Name.Variable.Class */
-.codehilite .vg { color: #19177C } /* Name.Variable.Global */
-.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
-.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
-.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */