Fixing Code-Prettify Colors with AI Agents in Blogger

Preface

Regarding syntax highlighting in my blog, I initially used modifying the blockquote CSS to achieve the display effect for code snippets

Later I experimented with introducing Google's code-prettify to implement syntax highlighting and converting blockquote to pre code

Finally, because syntax highlighting would erase the text background colors I set in code snippets, I switched back to the approach of modifying blockquote CSS to render code snippets

Now that I've made the Blogger editor accept pre and code tags, I use blockquote to actually represent quotation — quoting the natural-language prompts I send to Agents, which is indeed a scenario I've used very frequently in the last few months.

I also used an Agent to operate the Blogger API to help me convert blockquote to pre in my historical posts.

Now I'm reconsidering the syntax-highlighting issue.

Agent-Oriented Development

Hermes interfaces with the free public-benefit site agentrouter's deepseek-v4-flash

Approach 1

Now I want to bring back Google's code-prettify syntax-highlighting functionality

However, the syntax highlighting will erase the text background colors I set in code snippets problem still remains

My initial idea was:

In the Blogger/blogspot template, add a script that adds class="prettyprint" to pre elements. This script can analyze whether a pre element has manually set text colors. If there are manually set text colors, then don't add class="prettyprint" to that pre.

I sent the above text to an Agent to modify the Blogger/blogspot XML template

Key function

<!-- Add class='prettyprint' to all pre elements (skip if the pre has manually set color/background) -->
<script type='text/javascript'>
//<![CDATA[
(function(){
  /* Check whether an element and all its descendants have custom colors or backgrounds */
  function hasCustomColor(root){
    var elements=[root].concat(Array.prototype.slice.call(root.querySelectorAll('*')));
    for(var i=0;i<elements.length;i++){
      var el=elements[i];
      /* 1. inline style with color / background-color / background */
      var styleAttr=el.getAttribute('style');
      if(styleAttr&&/(^|;|\s)(color|background-color|background)\s*:/i.test(styleAttr))return true;
      /* 2. Legacy HTML attributes bgcolor / color (e.g. <font color="red">) */
      if(el.hasAttribute('bgcolor')||el.hasAttribute('color'))return true;
    }
    return false;
  }
  function markPre(){
    document.querySelectorAll('pre').forEach(function(el){
      if(!hasCustomColor(el))el.classList.add('prettyprint');
    });
  }
  function run(){
    markPre();
    if(window.PR&&typeof PR.prettyPrint==='function')PR.prettyPrint();
  }
  if(document.readyState==='loading'){
    document.addEventListener('DOMContentLoaded',run);
  }else{
    run();
  }
  /* Fallback: ensure highlighting once run_prettify.js finishes loading asynchronously */
  window.addEventListener('load',function(){
    if(window.PR&&typeof PR.prettyPrint==='function')PR.prettyPrint();
  });
})();
//]]>
</script>

However, this way, pre elements that weren't processed by prettify and those that were end up looking quite different.

Approach 2

So, is there any way to preserve the manually set text colors inside pre?

I found the source code of Google's code-prettify at https://github.com/googlearchive/code-prettify and asked the Agent to analyze it together with my blog HTML.

Analysis results:

1. When a pre has manually set text colors, after being processed by prettify, it becomes like this

<span style="color:red"><span class="pun">Red text</span></span>

2. How the coloring works
The outer style is set to red, the inner class sets the color according to prettify's CSS

3. Solution
Set CSS so that when a prettify class has a parent element with manually set colors, the prettify class color becomes ineffective

pre.prettyprinted :is(span[style*="color"], span[style*="background"], font[color], [bgcolor])
  :is(.pln,.kwd,.str,.com,.typ,.lit,.pun,.opn,.clo,.tag,.atn,.atv,.dec,.var,.fun) {
  color: inherit !important;
}

Correspondingly, the script that adds class="prettyprint" to pre is also greatly simplified

<!-- Add class='prettyprint' to all pre elements; manually set colors are protected by CSS in b:skin -->
<script type='text/javascript'>
//<![CDATA[
(function(){
  function run(){
    document.querySelectorAll('pre').forEach(function(el){el.classList.add('prettyprint')});
    if(window.PR&&typeof PR.prettyPrint==='function')PR.prettyPrint();
  }
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',run);else run();
  /* Fallback: ensure highlighting once run_prettify.js finishes loading asynchronously */
  window.addEventListener('load',function(){if(window.PR&&typeof PR.prettyPrint==='function')PR.prettyPrint();});
})();
//]]>
</script>

Overall effect