Fixing Code-Prettify Colors with AI Agents in Blogger

查看相关主题:

Preface

Regarding code highlighting in the blog, my earliest approach was modifying blockquote CSS to achieve the display effect of code blocks

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

Finally, because code highlighting would clear the text background color I set in code snippets, I switched back to the effect of 修改 blockquote 的CSS 来实现 代码段 

Now I have enabled the Blogger editor to input pre and code, so I use blockquote to actually represent quotations, quoting the natural language I send to the Agent, which is indeed a scenario I have used a lot in the last few months.

I also used the Agent to operate the Blogger API to help me replace blockquote with pre in historical posts

Now I am reconsidering the code highlighting issue.

Agent-Oriented Development

Hermes connects to deepseek-v4-flash on the free public agentrouter

Approach 1

I now want to add back Google's code-prettify code highlighting feature

But I still face the problem that 代码高亮会把我在代码段中设置的文字底色清除 

My initial idea was, 

在Blogger/blogspot模板中, 加一个 script 用来给 pre 加 class="prettyprint".
那么这个脚本可以分析pre中是否有手动设置文字颜色 的情况.
如果有手动设置文字颜色, 那么就不给这个pre加class="prettyprint"

I simply sent the above passage to the Agent to modify the Blogger/blogspot XML template

Key function
However, this way, pre elements not processed by prettify and those processed become quite different.

Approach 2

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

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

The analysis result is:

1. If text color is manually set in pre, after prettify processing it becomes like this

红色文字

2. Color display principle
The outer style is set to red, while the inner class sets the color according to prettify's CSS

3. Solution
Set CSS so that when the parent element of prettify's class has manually set color, prettify's class color becomes invalid

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


Overall effect




Comments
Post a Comment