I’ve been progressively building and adding to the custom-designed Halcyon theme that I’m using for this site. The latest round of changes includes support for code syntax highlighting in posts and static pages, which is powered by a combination of prism.js and some CSS styling.
The hard part was getting this to work in both light and dark modes, and with nested containers. It’s now more or less working. This post serves as a test of different code block use cases.
Flatten the Page List wrapper
In theme.css, match both nav shapes with :is() so the pills land on every item:
/* flatten the Page List wrapper into the nav's flex row */
.wp-block-navigation__container > .wp-block-page-list {
display: contents;
}
:is(.wp-block-navigation-item, .wp-block-pages-list__item) > a {
border-radius: 999px;
}Code language: CSS (css)The dark-mode override
Added to color-scheme.css — specificity (0,1,1) beats theme.json.
/* Code block lifts to the lighter lozenge in dark
mode so it separates from the #0f1722 page. */
html[data-halcyon-scheme="dark"] .wp-block-code {
background-color: #16263d;
border-color: rgba(255,255,255,0.12);
}Code language: CSS (css)1
Syntax highlighting
I’m using a fork of Code-Syntax-Highlighter to perform client-side highlighting of code blocks using prism.js.
Change 1
Prism.js extends the basic code block and ACF fields. Flexible and themed.
patterns/hero.php
IMPLEMENTATION
Here is a summary of the syntax highlighting code:
<ul class="wp-block-navigation__container">
<!-- direct child → matched -->
<li class="wp-block-navigation-item wp-block-home-link">…Home</li>
<!-- Page List's own wrapper -->
<ul class="wp-block-page-list">
<li class="wp-block-navigation-item">…About</li> ← NOT a direct child
…
</ul>
</ul>
Code language: HTML, XML (xml)2
Comment detection
Comments should automatically be highlighted.
CHANGE 2
I wanted code highlighting to detect automatically whether the code is within a multi-line comment.
IMPLEMENTATION
See example below.
/* flatten the Page List wrapper into the nav's flex row */
... :not(.is-menu-open) .wp-block-navigation__container > .wp-block-page-list {
display: contents;
}
… .wp-block-navigation__container > .wp-block-navigation-item
… :is(.wp-block-navigation__container,
.wp-block-navigation__container > .wp-block-page-list) > .wp-block-navigation-itemCode language: CSS (css)3
Manual language selection
Non-standard code formats are detected and highighted.
CHANGE 3
Previously, code without adequate context to be auto-detected would show in plain text.
Implementation
Now the code block can be manually selected and styled for the chosen langauge (in this case, CSS).
/* attributes */
border-radius 50%; minHeight 56px; padding 0 ×4;
/* markup */
... style="border-radius:50%; min-height:56px; width:56px" ...
✗ width:56px — Group has no width attribute, so it's never regenerated
✗ padding — declared in attributes but absent from the saved styleCode language: CSS (css)
Leave a Reply