Add Google Code Prettify to Blogger with Scrollbar Fix
Initially, I used CSS-defined blockquote to implement a sort of code display.
A couple of days ago, I came across a blog that recommended Google's code-prettify project https://www.shushen.xyz/
That made me think about how to bring this into Blogger.
For the original usage, refer to the readme
1. Include the JS
2. Use it in code blocks
and that's it
Approach
Load a JS script that converts
intoReference: GPT
Final result
https://github.com/crazypeace/blogger-replace-blockquote-to-pre/blob/main/blockquote2pre.js
Referencing past experience, using GitHub Pages to solve MIME type mismatch
This way to obtain the JS file
https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote2pre.js
Deployment
Modify the Blogger template
Add references to two JS files.
======
Done
======
Postscript
I thought it was all done.
But after checking a few more posts, I found that if a line of code is too long, it extends beyond the border.
Either apply a horizontal scrollbar, or wrap automatically. Considering the nature of code, a horizontal scrollbar is better.
Consulted GPT again.
Add a CSS to
overflow-x: auto;Written in the Blogger template, it looks like this:
Now it's really wrapped up.
======
Update
code-prettify comes with a few skins. If you like a dark theme, you can use it this way.
The effect will look like this:
Posts
