WordPress is powerful, no doubt about that. But publishing code inside posts has never felt as smooth as it should.
For anyone who often writes technical posts, displaying code cleanly is a real concern. I have tried quite a few WordPress code-highlighting plugins, almost every common option I could find, and to be honest, none of them has been completely satisfying. Some do not look good enough, while others rely on JavaScript libraries for highlighting and end up making the page painfully slow.
What I wanted was actually quite simple: a lightweight way to show code properly. Whether the code looked beautifully highlighted was not even the most important thing. A clean and usable display would already be enough.
For the time being, I have been using SyntaxHighlighter Evolved. After moving from PJBlog to WordPress, the code blocks in some older posts became messy, and most of them had originally been written using tags like [code][/code]. SyntaxHighlighter Evolved happens to support that style of tag, so it fit the situation reasonably well. Overall, I was fairly satisfied with it, although the loading speed was still a little slow.
The bigger annoyance, however, was not just performance. In the 2.x version of SyntaxHighlighter, when copying code manually, the line numbers were copied along with the code. That is especially irritating when only a small section of code is needed rather than the entire block.
The newer version of SyntaxHighlighter Evolved can use SyntaxHighlighter 3.x, but that brought a different set of problems. The line numbers no longer get copied, which is good, but the code no longer wraps automatically and instead shows a horizontal scrollbar at the bottom. The small toolbar available in the 2.x version is gone as well, and visually it does not feel as nice as before.
So the choice became awkward: stay with 2.x and suffer from copied line numbers, or switch to 3.x and accept a less convenient display style. Ideally, 2.x would keep its appearance and tools, while preventing line numbers from being copied.
The key question was how to stop the line numbers from being selected during copying. This is not an easy problem. Most solutions found online tend to disable copying for the whole page or a whole block of text, but that is not what is needed here. The goal is much more specific: allow the code itself to be copied, but exclude only the line numbers.
SyntaxHighlighter displays code line by line using a table-like structure. That led to a slightly roundabout solution: wrap the line numbers in text fields, then set those fields to a disabled state. When selecting text, the selection reaches the text field but does not actually select the number inside it. As a result, the copied content no longer includes the line numbers.
Here is a small example:
1、我是个正常文本框
<input type="text" value="01" />
2、我是个只读文本框
<input readonly="readonly" type="text" value="01" />
3、我是个无效文本框
<input disabled="disabled" type="text" value="01" />
With a normal text field, the 01 can be edited or deleted. With a readonly text field, the 01 can be copied but not changed. With a disabled text field, the 01 cannot be copied. That third behavior is exactly what is needed for the line numbers.
After making a small change to the plugin’s JavaScript code, the result was basically what I wanted.
The best behavior appears in Firefox: when copying manually, the line numbers are completely avoided. In IE, Chrome, Opera, Safari, and other browsers, the line numbers may still look as if they have been selected during copying. But after pasting, the line numbers do not actually appear. This can be a little misleading, because it looks as though the numbers were copied too, but the pasted result is correct. That part does not seem easy to improve further.
For now, this workaround makes SyntaxHighlighter Evolved much more usable under the 2.x version. Still, I keep hoping that a truly perfect WordPress code display plugin will eventually appear.