Prettify.js Perfection and Decade-Old Bugs

I'm a bit of a perfectionist, as many people who know me will tell you, so naturally I wanted to get prettify.js working exactly the way I want it to. It ended up being a bit more work than I predicted, but a lot of fun.

I already documented my experience with getting overflow working properly in Opera, here's the full documentation on my prettify.js implementation:

Adding it to blogger is simple, it's just a few lines inserted in the header:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js' type='text/javascript'/>
<script type='text/javascript'>
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

I wanted alternating line colors, which is simple enough: just add the class linenums to the pre tag and prettify throws the code in an ordered list. Prettify by default only numbers every 5th line, which I wasn't all that thrilled about, so I customized it by overwriting the prettify CSS on my blog. Blogger doesn't allow uploading a css file, so it's all inline in the header, which kinda sucks from a management perspective, but it could be worse. I also wanted to add a line between the numbers and the code to better separate them, that too was simple.

One thing that was a bit tricky was getting alternating line colors to play nice with my overflow. I did quite a bit of Googling before I found out the answer on StackOverflow. Apparently the problem has to do with ordered lists being block elements. Making them display:inline-block took care of it.

Below is my CSS for prettify:

#main-wrapper pre {
    overflow-wrap: normal;
    word-wrap: normal;
    overflow: auto;
    max-height: 800px;
}
ol.linenums {
    display:inline-block !important;
    margin-right: 0px;
}
ol.linenums li {
    border-left: 1px solid #a0e66a;
    padding-left: 5px;
    padding-right: 5px;
}
ol.linenums li.L0, ol.linenums li.L1, ol.linenums li.L2, ol.linenums li.L3, ol.linenums  li.L5, ol.linenums li.L6, ol.linenums li.L7, ol.linenums li.L8 {
    list-style-type: decimal;
}

Finally I wanted to add an option for people to remove the line numbers if they don't like them via a toggle, which was a simple javascript implementaiton:

<script type='text/javascript'>
    //<![CDATA[
        function toggle_visibility() {
            'use strict';
            var list, count;
            list = document.querySelectorAll('ol.linenums');
            count = 0;
            while(count < list.length) {
                if(list[count].style.paddingLeft === '0px') {
                    list[count].style.paddingLeft = '40px';
                } else {
                    list[count].style.paddingLeft = '0px';
                }
                count += 1;
            }
            return;
        }
    //]]>
</script>

With that, I'm pretty happy. I try to always do vanilla javascript instead of using jQuery. Not that there is anything wrong with jQuery: I just prefer to have my code work with as few dependencies as possible. Just call the javascript function with a <a href="#" onclick="toggle_visibility();return false;">Toggle Line Numbers</a> and it's all done.

After that I went around just checking everything out. I copied the script from Firefox into notepad and was dismayed to see that all the white space didn't copy over! Apparently there is a decade-old bug in Firefox where it won't copy whitespace in certain instances even when rendered in the browser. One such instance appears to be ordered lists inside a pre tag. I didn't know that before, though it would explain why PasteBin doesn't do a simple pre tag of an ordered list (it's quite complicated, you should take a look at their page source some time). I never knew this before. Opera does it fine and always has since me using it. I decided to see how other browsers handled it. Chrome did fine with whitespace too; I had no problem copying my script perfectly in Chrome. Then I tried Internet Explorer... Oh man, it was bad. It pasted the entire thing as one giant line. You see, I'm using the pre tag to the fullest: I'm not bothering to declare line breaks in html, since pre tags will honor them natively. Internet Explorer isn't just too stupid to copy whitespace in pre tags, it's too stupid to even copy newlines!

I found it quite entertaining and educating. I do hope that Firefox bug is fixed soon. I couldn't imagine using Firefox as my daily driver with that bug. IE? Talk about a nightmare. Anyone who stumbles upon this looking for an implementation of prettify.js on Blogger, I hope you found it helpful.

EDIT: As you may have noticed, I actually changed my mind after posting this. I'm now using a different theme for prettify.js: Tomorrow Night Eighties (adding "DejaVu Sans Mono", "Bitstream Vera Sans Mono" as fallback fonts for a more uniform cross-platform rendering). My reason for doing this? The whiteness of non linenums prettyprint is far too harsh. At the same time, I don't like how bad that bug about white-space copying in Firefox ended up being. I don't want to penalize Firefox users, so I found a theme that's not so harsh on the eyes (IMO). You should now be able to copy the code posted on here in Firefox with white-space intact. I'll leave the notes about the old way of doing things up here in case it is useful to anyone else.

Read More

Doing things the hard way and overflow-wrap

Last night I posted a script for GIMP. Naturally, I'd want syntax highlighting and no word wrapping, so I used the pre tag along with prettify. Posted it and was quite happy. Then I check it in Opera and I find the text had wrapped. I couldn't figure out why, I know pre should keep text from wrapping and Opera doesn't wrap other pre tags. I thought I was going insane! I spent an hour looking into it, but just couldn't figure it out. Everywhere else using overflow: auto, Opera would properly add the scroll wheel and not wrap pres. I couldn't find anything in my CSS that would be causing pre to wrap. Even explicitly told it to treat the content like pre, and it still wrapped.

Finally I took a look at the computed stylesheet thanks to Opera Dragonfly. I really should have done this from the beginning. I don't know why I didn't. I found a CSS property I've never heard of before: overflow-wrap. It was set to break-word. I had never heard of it before. I'm no web designer, so there's plenty of CSS I'm unfamiliar with. Naturally I Googled it and found it's a new tag to replace word-wrap (word wrap remains for legacy reasons) I still don't know where it came from; I'll look into that later today if I get the chance. In the end I spent about an hour looking for something that would have been much easier to find if I went about it the right way, and it was a simple fix: all I had to do was put overflow: normal; to my css and it all worked properly.

Why all this effort for Opera? Well, Opera is my browser of choice, so I naturally want my blog to work perfectly in it. I test my site in Opera and Firefox. I'll probably install Chrome to make sure it works fine in there too, but for now just Opera and Firefox. IE I don't bother with, but last night I took a look at it and it too was wrapping because of overflow-wrap. It makes me wonder why Firefox wasn't wrapping due to overflow-wrap. I wonder if Firefox is doing some things different with CSS3...

Anyway, in conclusion, it's amazing how simple something is when you look at what actually is being done and use logic :P Though I'm still having a bit of trouble getting alternating line colors to work with prettyprint when using scroll overflow.

Read More