Add Monokai syntax highlighting styles

This commit is contained in:
2026-07-27 16:38:31 +02:00
parent 43a8d0e64f
commit 7dd417c3fb
+99
View File
@@ -58,6 +58,16 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
--accent-hover: #8f3508;
--code-bg: #282623;
--code-text: #f5eee5;
/* Monokai Light tokens use darker variants for accessible contrast on a light panel. */
--monokai-bg: #faf8f5;
--monokai-border: #d5d0c8;
--monokai-text: #272822;
--monokai-comment: #75716a;
--monokai-pink: #c4265e;
--monokai-green: #4f7902;
--monokai-yellow: #9a6700;
--monokai-purple: #7653b7;
--monokai-cyan: #007c91;
--shadow: 0 10px 30px rgba(45, 34, 25, 0.08);
--content: 760px;
--wide: 1180px;
@@ -73,6 +83,15 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
--accent-hover: #ff9d6a;
--code-bg: #0e0e0d;
--code-text: #f5eee5;
--monokai-bg: #272822;
--monokai-border: #3e3d32;
--monokai-text: #f8f8f2;
--monokai-comment: #75715e;
--monokai-pink: #f92672;
--monokai-green: #a6e22e;
--monokai-yellow: #e6db74;
--monokai-purple: #ae81ff;
--monokai-cyan: #66d9ef;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
/* Automatic mode (and no saved preference) follows the operating-system color scheme. */
@@ -89,6 +108,15 @@ License URI: https://www.gnu.org/licenses/gpl-2.0.html
--accent-hover: #ff9d6a;
--code-bg: #0e0e0d;
--code-text: #f5eee5;
--monokai-bg: #272822;
--monokai-border: #3e3d32;
--monokai-text: #f8f8f2;
--monokai-comment: #75715e;
--monokai-pink: #f92672;
--monokai-green: #a6e22e;
--monokai-yellow: #e6db74;
--monokai-purple: #ae81ff;
--monokai-cyan: #66d9ef;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
}
@@ -466,6 +494,77 @@ h4 {
background: var(--surface);
border: 1px solid var(--line);
}
/* Monokai Light/Dark tokens follow the active site color mode. */
.entry-content pre,
.entry-content pre.wp-block-code,
.entry-content .wp-block-code {
border: 1px solid var(--monokai-border);
background: var(--monokai-bg);
color: var(--monokai-text);
}
/* Syntax Highlighting Code Block uses Highlight.js classes inside the core Code block. */
.entry-content .wp-block-code code.hljs,
.entry-content .wp-block-code .hljs {
display: block;
padding: 0;
background: transparent !important;
color: var(--monokai-text) !important;
}
.entry-content .wp-block-code .hljs-comment {
color: var(--monokai-comment) !important;
}
.entry-content .wp-block-code .hljs-keyword,
.entry-content .wp-block-code .hljs-selector-tag,
.entry-content .wp-block-code .hljs-literal,
.entry-content .wp-block-code .hljs-name,
.entry-content .wp-block-code .hljs-tag {
color: var(--monokai-pink) !important;
}
.entry-content .wp-block-code .hljs-title,
.entry-content .wp-block-code .hljs-section,
.entry-content .wp-block-code .hljs-built_in,
.entry-content .wp-block-code .hljs-function .hljs-title {
color: var(--monokai-green) !important;
}
.entry-content .wp-block-code .hljs-string,
.entry-content .wp-block-code .hljs-quote,
.entry-content .wp-block-code .hljs-link,
.entry-content .wp-block-code .hljs-type {
color: var(--monokai-yellow) !important;
}
.entry-content .wp-block-code .hljs-number,
.entry-content .wp-block-code .hljs-regexp,
.entry-content .wp-block-code .hljs-meta {
color: var(--monokai-purple) !important;
}
.entry-content .wp-block-code .hljs-attribute,
.entry-content .wp-block-code .hljs-attr,
.entry-content .wp-block-code .hljs-symbol,
.entry-content .wp-block-code .hljs-variable,
.entry-content .wp-block-code .hljs-template-variable {
color: var(--monokai-cyan) !important;
}
.entry-content .wp-block-code .hljs-addition {
color: var(--monokai-green) !important;
}
.entry-content .wp-block-code .hljs-deletion {
color: var(--monokai-pink) !important;
}
.entry-content .wp-block-code .shcb-line-numbers .shcb-loc::before {
border-right-color: var(--monokai-border);
color: var(--monokai-comment);
}
.wp-block-image,
.entry-content figure {
margin-left: 0;