20

Apparently in the past there have been difficulties with color issues in the blog. The recent blog post This is not your grandfather’s Perl contains some code samples. Two of the first samples, under the section Accessing new features contain commented text that is black:

Dark mode screenshot of code samples

As is observable in the screenshot above, the text in the comments is difficult to see.

The HTML for the first code block is:

<pre class="s-code-block wp-block-code hljs apache">
    <code>
        <span style="background-color: inherit; font-family: inherit; font-size: inherit; color: initial;">
            &nbsp;&nbsp;
            <span class="hljs-attribute">use</span>
            <span class="hljs-number">5</span>.
            <span class="hljs-number">36</span>
            ; # Turns
            <span class="hljs-literal">on</span>
            <span class="hljs-literal">all</span>
             new
            <span class="hljs-number">5</span>
            .
            <span class="hljs-number">36</span>
             (and earlier) features
        </span>
    </code>
</pre>

The background color apparently comes from style.css:

.p-article .s-code-block, .p-article p > code {
    font-size: 16px;
    line-height: 22px;
    color: var(--highlight-color);
    background-color: var(--highlight-bg);

In the file stacks.0.55.4.min.css there is one definition for those variables as:

--highlight-bg: #f6f6f6;
--highlight-color: #2f3337;

Then shortly after that are two more definitions for those variables:

--highlight-bg: #1c1b1b;
--highlight-color: #fff;

Can the colors be changed so the text is easier to read?

1
  • I'm guessing that span element around these 2 code samples is what's causing this issue, since the source code only shows that element around these 2 code samples in the post (which are having issues) and none of the others (which look fine in dark mode).
    – V2Blast
    Sep 16, 2022 at 4:33

1 Answer 1

4

As I had suggested in a comment, the <span style="background-color: inherit; font-family: inherit; font-size: inherit; color: initial;"> HTML element around these two code samples was what was causing the text here to remain black (rather than white) even in dark mode.

This formatting issue has now been fixed. The code in question (i.e. the parts that aren't being highlighted by syntax highlighting) should now appear black in light mode, and white in dark mode.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .