• Resolved camya

    (@ecc)


    Hi,

    I’m using Autoptimize on my site to minify the HTML, CSS, and JS. If I use the “Syntax-highlighting Code Block” Plugin (https://wordpress.org/plugins/syntax-highlighting-code-block/), Autoptimize leaves an unreplaced %MINIFYHTML% placeholder inside the code block on the website’s frontend.

    Never saw this before in any other block with Autoptimize.

    If I set the “Autoptimize Settings” -> “Also aggregate inline CSS?” to “Yes”, the placeholder is replaced.

    It looks like %MINIFYHTML43903717bc81998ee44729dd57469a6617%

    <pre class="wp-block-code">
      %MINIFYHTML43903717bc81998ee44729dd57469a6617%
      <div>
        <code class="hljs language-apache shcb-code-table shcb-line-numbers shcb-wrap-lines"><span class="shcb-loc"><span><span class="hljs-attribute"><span class="hljs-nomarkup">RewriteEngine</span></span> <span class="hljs-literal">On</span>
    </span></span>
        </code>
      </div>
    </pre>

    I first reported this to the “Syntax-highlighting Code Block” support page: https://wordpress.org/support/topic/autoptimize-leaves-minifyhtml-placeholder-in-code-block/

    Cheers,
    Andreas

    • This topic was modified 3 years, 9 months ago by camya.
Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Interesting .. So what does the unoptimized block between <pre></pre> look like?

    Thread Starter camya

    (@ecc)

    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 3 years, 9 months ago by camya.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, and can you check the PHP-errorlog for relevant errors maybe?

    Thread Starter camya

    (@ecc)

    There is no related error log entry.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, can you try adding either syntax-highlighting-code-block-css or .hljs to the comma-separated CSS optimization exclusion field so we know which one triggers the bug?

    Thread Starter camya

    (@ecc)

    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.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    that’s the field 🙂

    can you try just syntax-highlighting-code-block-css? or scrivo/highlight-php/styles/default.css?

    Thread Starter camya

    (@ecc)

    🙂

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

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

    Plugin Author Optimizing Matters

    (@optimizingmatters)

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

    also in the aggregated CSS? or does that just move the %MINIFYHTML43903717bc81998ee44729dd57469a6617% to the CSS-file?

    Thread Starter camya

    (@ecc)

    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}
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, was able to reproduce and have a fix (in the 3rd party HTML minifier) for you to test; can you open wp-content/plugins/autoptimize/classes/external/php/minify-html.php and on line 161 add:

    $this->_placeholders = array_reverse( $this->_placeholders, true );

    Let me know if this fixes things for you (it seems to work on my localhost installation)?

    frank

    Thread Starter camya

    (@ecc)

    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

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    thanks for testing & confirming, I’ll make sure this goes into the next version!

    frank

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘“%MINIFYHTML%” not replaced [Syntax-highlighting Code Block Plugin]’ is closed to new replies.