2024 theme: Add code syntax block custom styles

Copied from developer.wordpress.org

wp-content/themes/pub/wporg-learn-2024/functions.php

@@ -99,7 +99,7 @@ function setup() {
 	add_theme_support( 'responsive-embeds' );
 
 	add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );
-	add_filter( 'mkaz_prism_css_path', '__return_empty_string' ); // Disable default styles to avoid conflicts.
+	add_filter( 'mkaz_prism_css_path', __NAMESPACE__ . '\update_prism_css_path' );
 }
 
 /**
@@ -125,6 +125,17 @@ function enqueue_assets() {
 	}
 }
 
+/**
+ * Customize the syntax highlighter style.
+ * See https://github.com/PrismJS/prism-themes.
+ *
+ * @param string $path Path to the file to override, relative to the theme.
+ * @return string
+ */
+function update_prism_css_path( $path ) {
+	return '/build/prism/style-index.css';
+}
+
 /**
  * Provide a list of local navigation menus.
  */

wp-content/themes/pub/wporg-learn-2024/src/prism/_colors.scss

@@ -0,0 +1,84 @@
+//Colors
+
+$color-white: #fff;
+$color-black: #000;
+
+// Color map of the WordPress core palette hex values.
+// Please keep this map in sync with the reference: https://codepen.io/ryelle/full/WNGVEjw.
+$colors: (
+	gray-0: #f6f7f7,
+	gray-2: #f0f0f1,
+	gray-5: #dcdcde,
+	gray-10: #c3c4c7,
+	gray-20: #a7aaad,
+	gray-30: #8c8f94,
+	gray-40: #787c82,
+	gray-50: #646970,
+	gray-60: #50575e,
+	gray-70: #3c434a,
+	gray-80: #2c3338,
+	gray-90: #1d2327,
+	gray-100: #101517,
+	blue-0: #f0f6fc,
+	blue-5: #c5d9ed,
+	blue-10: #9ec2e6,
+	blue-20: #72aee6,
+	blue-30: #4f94d4,
+	blue-40: #3582c4,
+	blue-50: #2271b1,
+	blue-60: #135e96,
+	blue-70: #0a4b78,
+	blue-80: #043959,
+	blue-90: #01263a,
+	blue-100: #00131c,
+	red-0: #fcf0f1,
+	red-5: #facfd2,
+	red-10: #ffabaf,
+	red-20: #ff8085,
+	red-30: #f86368,
+	red-40: #e65054,
+	red-50: #d63638,
+	red-60: #b32d2e,
+	red-70: #8a2424,
+	red-80: #691c1c,
+	red-90: #451313,
+	red-100: #240a0a,
+	yellow-0: #fcf9e8,
+	yellow-5: #f5e6ab,
+	yellow-10: #f2d675,
+	yellow-20: #f0c33c,
+	yellow-30: #dba617,
+	yellow-40: #bd8600,
+	yellow-50: #996800,
+	yellow-60: #755100,
+	yellow-70: #614200,
+	yellow-80: #4a3200,
+	yellow-90: #362400,
+	yellow-100: #211600,
+	green-0: #edfaef,
+	green-5: #b8e6bf,
+	green-10: #68de7c,
+	green-20: #1ed14b,
+	green-30: #00ba37,
+	green-40: #00a32a,
+	green-50: #008a20,
+	green-60: #007017,
+	green-70: #005c12,
+	green-80: #00450c,
+	green-90: #003008,
+	green-100: #001c05
+);
+
+// Simple function to retreive colors in the $colors map.
+// e.g. `background-color: color(gray-50);`
+
+@function get-color($key) {
+
+	@if map-has-key($colors, $key) {
+
+		@return map-get($colors, $key);
+	}
+
+	@warn "Unknown `#{$key}` in $colors.";
+	@return null;
+}

wp-content/themes/pub/wporg-learn-2024/src/prism/block.json

@@ -0,0 +1,3 @@
+{
+	"script": "file:./index.js"
+}

wp-content/themes/pub/wporg-learn-2024/src/prism/index.js

@@ -0,0 +1,2 @@
+// Noop, just imports the CSS for webpack.
+import './style.scss';

wp-content/themes/pub/wporg-learn-2024/src/prism/style.scss

@@ -0,0 +1,209 @@
+/**
+ * Custom theme for learn.wordpress.org.
+ * Forked from a11y-dark theme by ericwbailey, which was based on the okaidia theme.
+ *
+ * https://github.com/PrismJS/prism-themes/blob/master/themes/prism-a11y-dark.css
+ * https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
+ */
+
+@import "colors";
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: get-color(gray-100);
+	background: none;
+	font-family: var(--wp--preset--font-family--monospace);
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+	transition: height 500ms;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	overflow: auto;
+	border-radius: 0.3em;
+	direction: ltr;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: get-color(gray-0);
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: get-color(green-60);
+}
+
+.token.punctuation {
+	color: get-color(gray-60);
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: get-color(blue-80);
+}
+
+.token.boolean,
+.token.number {
+	color: get-color(gray-100);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: get-color(blue-50);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #a85f00;
+}
+
+.token.function {
+	color: #b8236d;
+}
+
+.token.keyword {
+	color: get-color(blue-60);
+	font-weight: 600;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function-definition {
+	color: get-color(gray-100);
+}
+
+.token.important,
+.token.bold {
+	font-weight: 700;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+@media screen and (-ms-high-contrast: active) {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		color: windowText;
+		background: window;
+	}
+
+	:not(pre) > code[class*="language-"],
+	pre[class*="language-"] {
+		background: window;
+	}
+
+	.token.important {
+		background: highlight;
+		color: window;
+		font-weight: 700;
+	}
+
+	.token.atrule,
+	.token.attr-value,
+	.token.function,
+	.token.keyword,
+	.token.operator,
+	.token.selector {
+		font-weight: 700;
+	}
+
+	.token.attr-value,
+	.token.comment,
+	.token.doctype,
+	.token.function,
+	.token.keyword,
+	.token.operator,
+	.token.property,
+	.token.string {
+		color: highlight;
+	}
+
+	.token.attr-value,
+	.token.url {
+		font-weight: 700;
+	}
+}
+
+/* Line Numbers */
+pre.line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+	position: relative;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 4em; /* works for line-numbers below 10000 lines */
+	letter-spacing: -1px;
+	border-right: 0;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+.line-numbers-rows > span {
+	pointer-events: none;
+	display: block;
+	counter-increment: linenumber;
+}
+
+.line-numbers-rows > span::before {
+	content: counter(linenumber);
+	color: #5c6370;
+	display: block;
+	padding-right: 0.8em;
+	text-align: right;
+}