feat: add SyntaxHighlight skinStyles

README.md

@@ -53,6 +53,7 @@ Name | Grade | Version | Last updated
 [RelatedArticles](https://www.mediawiki.org/wiki/Extension:RelatedArticles) | D | N/A | N/A
 [Semantic MediaWiki](https://www.mediawiki.org/wiki/Extension:Semantic_MediaWiki) | E | N/A | N/A
 [Semantic Result Formats](https://www.mediawiki.org/wiki/Extension:Semantic_Result_Formats) | E | N/A | N/A
+[SyntaxHighlight](https://www.mediawiki.org/wiki/Extension:SyntaxHighlight) | A | REL1_35 `05598b3` | 2021-08-26
 [Tabber](https://www.mediawiki.org/wiki/Extension:Tabber) | A | N/A | N/A
 [TabberNeue](https://www.mediawiki.org/wiki/Extension:TabberNeue) | A | 1.0.1 `0dc1b34` | 2021-06-21
 [TimedMediaHandler](https://www.mediawiki.org/wiki/Extension:TimedMediaHandler) | D | N/A | N/A

skin.json

@@ -408,6 +408,8 @@
 			"+ext.Lingo": "skinStyles/extensions/Lingo/ext.Lingo.less",
 			"+ext.Lingo.jquery.qtip": "skinStyles/extensions/Lingo/ext.Lingo.jquery.qtip.less",
 
+			"+ext.pygments": "skinStyles/extensions/SyntaxHighlight_GeSHi/ext.pygments.less",
+
 			"+ext.MsUpload": "skinStyles/extensions/MsUpload/ext.MsUpload.less",
 
 			"+ext.relatedArticles.cards": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less",

skinStyles/extensions/SyntaxHighlight_GeSHi/ext.pygments.less

@@ -0,0 +1,304 @@
+/*
+ * Citizen
+ *
+ * SkinStyles for Extension:SyntaxHighlight
+ * Module: ext.pygments
+ * Version: REL1_35 05598b3
+ *
+ * Date: 2021-08-26
+*/
+
+@import '../../../resources/variables.less';
+
+/* pygments.generated.css */
+.mw-highlight {
+	// FIXME: This should be shared between other extensions
+	--color-syntax-red: @color-syntax-red;
+	--color-syntax-orange: @color-syntax-orange;
+	--color-syntax-yellow: @color-syntax-yellow;
+	--color-syntax-green: @color-syntax-green;
+	--color-syntax-cyan: @color-syntax-cyan;
+	--color-syntax-blue: @color-syntax-blue;
+	--color-syntax-paleblue: @color-syntax-paleblue;
+	--color-syntax-purple: @color-syntax-purple;
+	--color-syntax-brown: @color-syntax-brown;
+	--color-syntax-pink: @color-syntax-pink;
+	--color-syntax-violet: @color-syntax-violet;
+	--color-syntax-grey: @color-syntax-grey;
+	background: var( --color-surface-2 );
+
+	.c {
+		color: var( --color-syntax-grey );
+	}
+
+	.err {
+		border-color: var( --background-color-destructive );
+	}
+
+	.k {
+		color: var( --color-syntax-cyan );
+	}
+
+	.o {
+		color: var( --color-syntax-cyan );
+	}
+
+	.ch {
+		color: var( --color-syntax-grey );
+	}
+
+	.cm {
+		color: var( --color-syntax-grey );
+	}
+
+	.cp {
+		color: var( --color-syntax-brown );
+	}
+
+	.cpf {
+		color: var( --color-syntax-grey );
+	}
+
+	.c1 {
+		color: var( --color-syntax-grey );
+	}
+
+	.cs {
+		color: var( --color-syntax-grey );
+	}
+
+	.gd {
+		color: var( --color-syntax-red );
+	}
+
+	.gr {
+		color: var( --color-destructive );
+	}
+
+	.gh {
+		color: var( --color-syntax-paleblue );
+	}
+
+	.gi {
+		color: var( --color-syntax-green );
+	}
+
+	.go {
+		color: var( --color-base--subtle );
+	}
+
+	.gp {
+		color: var( --color-syntax-paleblue );
+	}
+
+	.gu {
+		color: var( --color-syntax-violet );
+	}
+
+	.gt {
+		color: var( --color-syntax-blue );
+	}
+
+	.kc {
+		color: var( --color-syntax-cyan );
+	}
+
+	.kd {
+		color: var( --color-syntax-cyan );
+	}
+
+	.kn {
+		color: var( --color-syntax-cyan );
+	}
+
+	.kp {
+		color: var( --color-syntax-cyan );
+	}
+
+	.kr {
+		color: var( --color-syntax-cyan );
+	}
+
+	.kt {
+		color: var( --color-syntax-yellow );
+	}
+
+	.m {
+		color: var( --color-syntax-orange );
+	}
+
+	.s {
+		color: var( --color-syntax-green );
+	}
+
+	.na {
+		color: var( --color-syntax-purple );
+	}
+
+	.nb {
+		color: var( --color-syntax-cyan );
+	}
+
+	.nc {
+		color: var( --color-syntax-yellow );
+	}
+
+	.no {
+		color: var( --color-syntax-blue );
+	}
+
+	.nd {
+		color: var( --color-syntax-cyan );
+	}
+
+	.ni {
+		color: var( --color-base );
+	}
+
+	.ne {
+		color: var( --color-destructive );
+	}
+
+	.nf {
+		color: var( --color-syntax-blue );
+	}
+
+	.nl {
+		color: var( --color-syntax-green );
+	}
+
+	.nn {
+		color: var( --color-syntax-purple );
+	}
+
+	.nt {
+		color: var( --color-syntax-yellow );
+	}
+
+	.nv {
+		color: var( --color-base--emphasized );
+	}
+
+	.ow {
+		color: var( --color-syntax-cyan );
+	}
+
+	.w {
+		color: var( --color-base--subtle );
+	}
+
+	.mb {
+		color: var( --color-syntax-orange );
+	}
+
+	.mf {
+		color: var( --color-syntax-orange );
+	}
+
+	.mh {
+		color: var( --color-syntax-orange );
+	}
+
+	.mi {
+		color: var( --color-syntax-orange );
+	}
+
+	.mo {
+		color: var( --color-syntax-orange );
+	}
+
+	.sa {
+		color: var( --color-syntax-green );
+	}
+
+	.sb {
+		color: var( --color-syntax-green );
+	}
+
+	.sc {
+		color: var( --color-syntax-green );
+	}
+
+	.dl {
+		color: var( --color-syntax-green );
+	}
+
+	.sd {
+		color: var( --color-syntax-green );
+	}
+
+	.s2 {
+		color: var( --color-syntax-green );
+	}
+
+	.se {
+		color: var( --color-base );
+	}
+
+	.sh {
+		color: var( --color-syntax-green );
+	}
+
+	.si {
+		color: var( --color-base--emphasized );
+	}
+
+	.sx {
+		color: var( --color-syntax-orange );
+	}
+
+	.sr {
+		color: var( --color-base--emphasized );
+	}
+
+	.s1 {
+		color: var( --color-syntax-green );
+	}
+
+	.ss {
+		color: var( --color-syntax-cyan );
+	}
+
+	.bp {
+		color: var( --color-syntax-orange );
+	}
+
+	.fm {
+		color: var( --color-syntax-blue );
+	}
+
+	.vc {
+		color: var( --color-base--emphasized );
+	}
+
+	.vg {
+		color: var( --color-base--emphasized );
+	}
+
+	.vi {
+		color: var( --color-base--emphasized );
+	}
+
+	.vm {
+		color: var( --color-base--emphasized );
+	}
+
+	.il {
+		color: var( --color-syntax-orange );
+	}
+}
+
+.skin-citizen-dark .mw-highlight {
+	// FIXME: This should be shared between other extensions
+	--color-syntax-red: @color-syntax-red-dark;
+	--color-syntax-orange: @color-syntax-orange-dark;
+	--color-syntax-yellow: @color-syntax-yellow-dark;
+	--color-syntax-green: @color-syntax-green-dark;
+	--color-syntax-cyan: @color-syntax-cyan-dark;
+	--color-syntax-blue: @color-syntax-blue-dark;
+	--color-syntax-paleblue: @color-syntax-paleblue-dark;
+	--color-syntax-purple: @color-syntax-purple-dark;
+	--color-syntax-brown: @color-syntax-brown-dark;
+	--color-syntax-pink: @color-syntax-pink-dark;
+	--color-syntax-violet: @color-syntax-violet-dark;
+}