Code Blocks Upgraded
I posted recently that I was finished making major changes to the site, and that I was calling it "finished" for the time being.
Apparantly, I spoke too soon. A good friend of mine commented that the copy-to-clipboard functionality was not working on the code block that I placed in the first article. I looked into the problem and found that WordPress was turning my "straight-quotes" into "smart-quotes", which is a big no-no. There are two reasons for this, one more obvious than the other. First off, code that has characters replaced simply will not compile. Secondly, Google doesn't like smart-quotes, and won't index pages that use them heavily.
I dove into the WordPress code and removed the character replacement for quotes. I removed it for a few other characters, as well. As I scrutinzed the code blocks more and more, I decided that I wanted to use something a little more powerful. After looking into it, I found that there was a much prettier, and much more functional (including C# code support!) upgrade to the code block module I was using. SyntaxHighlighter 2.0.296 seemed simple enough to integrate, so I upgraded.
Immediately, I ran into a problem. My code blocks began to appear like this:
Not good. Completely illegible, if nothing else. After hours and hours, I found that I could place a code block outside my articles, and get the desired output, like this:
I fiddled around further, and found (thanks to Google Chrome's "Inspect element" feature) that the style applied to the article content was causing the funny behavior. Why? I'll probably never know - it's something within the SyntaxHighlighter base code. I notified that author, Alex Gorbatchev, and maybe it'll be fixed in a future release. In any case, I took a look at this CSS chunk:
.entry blockquote, .entry pre, .entry code,
.commentlist blockquote, .commentlist code {
color:#76767a;
background:#f2f2f2;
padding:6px 14px;
margin:18px 35px;
border-right:1px solid #DDD;
border-bottom:1px solid #DDD;
display:block;
}
I extracted the "display: block" line from this chunk and removed the styling applied to .entry code, and I was all done. Well, almost. The code blocks were finally working, but I found that some spaces were being placed in my code, particularly with ASP tags. Furthermore, there are some funny buttons in the gutter near the line numbers. Some of the text doesn't appear so well when its bolded. Finally, there is no built-in highlighting for ASP.NET code render blocks.
I set to work to solve the most urgent problem: spaces being added to my code. This would prevent people from copy-and-pasting code from this website, which is the problem I set out to solve in the first place. I tried to find out why WordPress was adding those spaces, but since PHP lacks robust tracing, this was a fruitless effort. I ended up adding some post-processing filtering to remove those spaces right before they are displayed on the page. Not the best solution, but it works for now.
I have left myself some work to do on the code blocks, but at least things are working correctly for now. I'll probably tackle the ASP.NET-specific syntax highlighting next. If anyone sees any issues with the code blocks, please let me know.



Subscribe to this category