Why I Use Blockquote Instead of Code Highlighting

Besides Google's code-prettify, I've also tried Prism and highlight.js

Prism

Usage

Add the following in the Blogspot template

Adding Prism CSS and JS to the template

Result

highlight.js can automatically detect the code type, but it's not very accurate — bash gets identified as Ruby

highlight.js auto-detection misidentifies bash as Ruby


If you want bash to be identified correctly, you have to add a # at the beginning of each line. But that makes it inconvenient to copy and paste directly into the command line to run.

Detection of JS code works fine.

Inspect element to check code.hljs styles



There's also one biggest issue: after I replace blockquote with pre code, highlight.js always displays them on a single line.
Script that replaces blockquote with pre code

The problem with displaying command line operation logs

Besides the two points above, I have one more specific issue.
My tutorials provide command line operation logs so readers can compare whether their own operations are correct. For example,

Command line operation log shown in the tutorial

But due to the nature of pre code, the spaces and some special characters inside it are handled differently from other HTML elements.
If I convert blockquote to pre code, the result looks like this,

Display after switching to pre code



Code highlighting overrides the font colors I specifically set

There's another scenario where code highlighting isn't suitable.
When quoting code, I set specific font colors for certain parts based on the tutorial content. For example,

I deliberately set colors on some text in the code


If I use code highlighting, it changes to standardized colors.

Code highlighting colors get overridden to standard colors


In summary, I'll continue using blockquote


========
End
Comments