“%MINIFYHTML%” not replaced [Syntax-highlighting Code Block Plugin]

The unminified markup of the “Syntax-highlighting Code Block Plugin” looks like this.

<pre class="wp-block-code">
    <link
        rel="stylesheet"
        id="syntax-highlighting-code-block-css"
        href="/wp-content/plugins/syntax-highlighting-code-block/vendor/scrivo/highlight-php/styles/default.css?ver=1596185250"
        type="text/css"
        media="all"
    >
    <style>.wp-block-code {
        border: 0;
        padding: 0;
    }
    
    .wp-block-code > div {
        overflow: auto;
    }
    
    .hljs {
        box-sizing: border-box;
    }
    
    .hljs.shcb-code-table {
        display: table;
        width: 100%;
    }
    
    .hljs.shcb-code-table > .shcb-loc {
        color: inherit;
        display: table-row;
        width: 100%;
    }
    
    .hljs.shcb-code-table .shcb-loc > span {
        display: table-cell;
    }
    
    .wp-block-code code.hljs:not(.shcb-wrap-lines) {
        white-space: pre;
    }
    
    .wp-block-code code.hljs.shcb-wrap-lines {
        white-space: pre-wrap;
    }
    
    .hljs.shcb-line-numbers {
        border-spacing: 0;
        counter-reset: line;
    }
    
    .hljs.shcb-line-numbers > .shcb-loc {
        counter-increment: line;
    }
    
    .hljs.shcb-line-numbers .shcb-loc > span {
        padding-left: 0.75em;
    }
    
    .hljs.shcb-line-numbers .shcb-loc::before {
        border-right: 1px solid #ddd;
        content: counter(line);
        display: table-cell;
        padding: 0 0.75em;
        text-align: right;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        white-space: nowrap;
        width: 1%;
    }
    </style>
    <style>.hljs > mark.shcb-loc {
        background-color: #ddf6ff;
    }</style>
    <div>
        <code class="hljs language-apache shcb-code-table shcb-line-numbers"><span class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteEngine</span></span> <span class="hljs-literal">On</span></span></span>
            <mark class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteCond</span></span> <span class="hljs-variable">%{HTTP:Custom-Access-Header}</span> !^REQUIRED_ACCESS_STRING$</span></mark>
            <span class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteRule</span></span> ^ -<span class="hljs-meta"> [F]</span></span></span>
        </code>
    </div>
</pre>

• This reply was modified 4 years ago by camya.

There is no related error log entry.

Strange. I can’t find a field to add CSS IDs or classes. The only field to add text is the “Exclude CSS from Autoptimize:” field. (A comma-separated list of “scripts”)

I first added “#syntax-highlighting-code-block-css”, and then “.hljs” to this field and hit empty cache.

The placeholder is still visible in both tests.

🙂

Added both entries. The placeholder was still visible in both cases.

Only if I activate the “Also aggregate inline CSS” option, everything looks fine.

Below is the HTML with “Also aggregate inline CSS” activated.

The CSS is added to the generated CSS “/wp-content/cache/autoptimize/css/autoptimize_de0c11f5cb9efdfef064317fa7f429e5.css” file.

The output looks like expected.

<pre class="wp-block-code">
    <div>
        <code class="hljs language-apache shcb-code-table shcb-line-numbers"><span class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteEngine</span></span> <span class="hljs-literal">On</span>
</span></span><mark class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteCond</span></span> <span class="hljs-variable">%{HTTP:Custom-Access-Header}</span> !^REQUIRED_ACCESS_STRING$
</span></mark><span class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteRule</span></span> ^ -<span class="hljs-meta"> [F]</span>
</span></span>
        </code>
    </div>
</pre>

Content of the generated CSS autoptimize_de0c11f5cb9efdfef064317fa7f429e5.css file.

.hljs{display:block;overflow-x:auto;padding:.5em;background:#f0f0f0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:700}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#800}.hljs-title,.hljs-section{color:#800;font-weight:700}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#bc6060}.hljs-literal{color:#78a960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
.wp-block-code{border:0;padding:0}.wp-block-code>div{overflow:auto}.hljs{box-sizing:border-box}.hljs.shcb-code-table{display:table;width:100%}.hljs.shcb-code-table>.shcb-loc{color:inherit;display:table-row;width:100%}.hljs.shcb-code-table .shcb-loc>span{display:table-cell}.wp-block-code code.hljs:not(.shcb-wrap-lines){white-space:pre}.wp-block-code code.hljs.shcb-wrap-lines{white-space:pre-wrap}.hljs.shcb-line-numbers{border-spacing:0;counter-reset:line}.hljs.shcb-line-numbers>.shcb-loc{counter-increment:line}.hljs.shcb-line-numbers .shcb-loc>span{padding-left:.75em}.hljs.shcb-line-numbers .shcb-loc:before{border-right:1px solid #ddd;content:counter(line);display:table-cell;padding:0 .75em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1%}
.hljs>mark.shcb-loc{background-color:#ddf6ff}

Hi Frank,

I tested the hot fix… and it works. The unreplaced placeholder is gone now.

Thank you for your support, and thank you for your plugin.

Cheers,
Andreas