[skyhawk133]

LOL. Wife and I are going diving where we dove on our honeymoon a couple years ago.

[JackOfAllTrades]

Can't remember the last time I went diving with the wife

[skyhawk133]

Hey-oooooooo!

[Atli]

Ok, version 2.0

// ==UserScript==
// @name DIC Codetag Tweaker
// @namespace http://www.dreamincode.net/
// @description Widens the code tags at dreamincode.net to the full width of the post and adds line numbers.
// @version 2.0.1
// @include http://www.dreamincode.net/*
// @match http://www.dreamincode.net/*
// @run-at document-start
// ==/UserScript==

if(typeof(window.dic) == "undefined" || !window.dic) {
    window.dic = {  }
}
window.dic.codeTags =
{
    /** Returns the number of characters in a number. */
    numWidth : function(num) {
        return num.toString().length;
    },

    /** Adds the line numbers. ONLY CALL THIS ONCE PER BOX or you
     *  end up with a bunch of extra numbers. */
    addLines : function(box) {
        var originalHTML = box.innerHTML
        var lines = originalHTML.split("<br>")
        var line_count_num = this.numWidth(lines.length)
        var newHTML = ""
        for(var i = 1; i <= lines.length; i++)
        {
            newHTML += "<span class=\"dic_codeTags_fixer\" style=\"color: gray;\">";
            var padding = line_count_num - this.numWidth(i);
            for(; padding > 0; padding--) {
                newHTML += " ";
            }
            newHTML += i + ". </span>" + lines[i-1] + "<br>"
        }
        box.innerHTML = newHTML;
    },

    hideLines : function(box) {
        var elems = box.getElementsByClassName("dic_codeTags_fixer");
        for(var i = 0; i < elems.length; i++) {
            elems[i].innerHTML = "";
        }
    },

    /** TODO: find a better way to fetch the box line count */
    showLines : function(box) {
        var elems = box.getElementsByClassName("dic_codeTags_fixer");
        var lines = box.innerHTML.split("<br>")
        var line_count_width = this.numWidth(lines.length);
        for(var i = 0; i < elems.length; i++) {
            var newText = "";
            var padding = line_count_width - this.numWidth(i+1);
            for(; padding > 0; padding--) {
                newText += " ";
            }
            elems[i].innerHTML = newText + (i+1) + ". ";
        }
    },

    /** Adds the Disable/Enable button to a code box */
    addLineToggler : function(box) {
        var toggler = document.createElement("a")
        toggler.innerHTML = "Disable Numbers"
        toggler.isEnabled = true;
        toggler.style.position = "absolute"
        toggler.style.fontSize = "80%";
        toggler.style.backgroundColor = "#F7F7F7";
        toggler.style.left = (box.offsetLeft + box.offsetWidth - 125) + "px";
        toggler.style.top = (box.offsetTop + 2) + "px";
        box.appendChild(toggler);

        toggler.addEventListener("click", function() {
            if(toggler.isEnabled) {
                window.dic.codeTags.hideLines(box);
                toggler.innerHTML = "Enable Numbers"
                toggler.isEnabled = false
            }
            else {
                window.dic.codeTags.showLines(box);
                toggler.innerHTML = "Disable Numbers"
                toggler.isEnabled = true
            }
        }, true);
    },

    /** Meant to be called by the onload handler */
    onload : function()
    {
        if(this != window.dic.codeTags) {
            window.dic.codeTags.onload.call(window.dic.codeTags);
        }
        if(typeof this.addLines == "function") {
            var new_size = "95%";
            var pres = document.getElementsByClassName('prettyprint ');
            var pi = pres.length - 1;
            for(;pi >= 0; pi--)
            {
                pres[pi].style.width = new_size
                this.addLines(pres[pi]);
                this.addLineToggler(pres[pi]);
            }
        }
    }
}
window.addEventListener("load", window.dic.codeTags.onload, false);

Adds line numbers, allows you to enable/.disable them, and widens the code tags to fit the post.
Works in Firefox (with greasemonkey) and Chrome... probably Opera too.

This post has been edited by Atli: 09 June 2010 - 07:56 PM

[RedSon]

Atli, on 09 June 2010 - 08:01 AM, said:

Ok, version 2.0

// ==UserScript==
// @name DIC Codetag Tweaker
// @namespace http://www.dreamincode.net/
// @description Widens the code tags at dreamincode.net to the full width of the post.
// @include http://www.dreamincode.net/*
// @match http://www.dreamincode.net/*
// @run-at document-start
// ==/UserScript==

if(typeof(window.dic) == "undefined" || !window.dic) {
    window.dic = {  }
}
window.dic.codeTags =
{
    /** Returns the number of characters in a number. */
    numWidth : function(num) {
        return num.toString().length;
    },

    /** Adds the line numbers. ONLY CALL THIS ONCE PER BOX or you
     *  end up with a bunch of extra numbers. */
    addLines : function(box) {
        var originalHTML = box.innerHTML
        var lines = originalHTML.split("<br>")
        var line_count_num = this.numWidth(lines.length)
        var newHTML = ""
        for(var i = 1; i <= lines.length; i++)
        {
            newHTML += "<span class=\"dic_codeTags_fixer\" style=\"color: gray;\">";
            var padding = line_count_num - this.numWidth(i);
            for(; padding > 0; padding--) {
                newHTML += " ";
            }
            newHTML += i + ". </span>" + lines[i-1] + "<br>"
        }
        box.innerHTML = newHTML;
    },

    hideLines : function(box) {
        var elems = box.getElementsByClassName("dic_codeTags_fixer");
        for(var i = 0; i < elems.length; i++) {
            elems[i].innerHTML = "";
        }
    },

    /** TODO: find a better way to fetch the box line count */
    showLines : function(box) {
        var elems = box.getElementsByClassName("dic_codeTags_fixer");
        var lines = box.innerHTML.split("<br>")
        var line_count_width = this.numWidth(lines.length);
        for(var i = 0; i < elems.length; i++) {
            var newText = "";
            var padding = line_count_width - this.numWidth(i+1);
            for(; padding > 0; padding--) {
                newText += " ";
            }
            elems[i].innerHTML = newText + (i+1) + ". ";
        }
    },

    /** Adds the Disable/Enable button to a code box */
    addLineToggler : function(box) {
        var toggler = document.createElement("a")
        toggler.innerHTML = "Disable Numbers"
        toggler.isEnabled = true;
        toggler.style.position = "absolute"
        toggler.style.fontSize = "80%";
        toggler.style.backgroundColor = "#F7F7F7";
        toggler.style.left = (box.offsetLeft + box.offsetWidth - 125) + "px";
        toggler.style.top = (box.offsetTop + 2) + "px";
        box.appendChild(toggler);

        toggler.addEventListener("click", function() {
            if(toggler.isEnabled) {
                window.dic.codeTags.hideLines(box);
                toggler.innerHTML = "Enable Numbers"
                toggler.isEnabled = false
            }
            else {
                window.dic.codeTags.showLines(box);
                toggler.innerHTML = "Disable Numbers"
                toggler.isEnabled = true
            }
        }, true);
    },

    /** Meant to be called from the window.onload event */
    onload : function()
    {
        if(this != window.dic.codeTags) {
            window.dic.codeTags.onload.call(window.dic.codeTags);
        }
        var new_size = "95%";
        var pres = document.getElementsByClassName('prettyprint ');
        var pi = pres.length - 1;
        for(;pi >= 0; pi--)
        {
            pres[pi].style.width = new_size
            this.addLines(pres[pi]);
            this.addLineToggler(pres[pi]);
        }
    }
}
window.addEventListener("load", window.dic.codeTags.onload, false);

Adds line numbers, allows you to enable/.disable them, and widens the code tags to fit the post.
Works in Firefox (with greasemonkey) and Chrome... probably Opera too.

Atil,

Tell me how this works, I know I need greasemonkey but what do I do from there?

[RedSon]

Okay, I think I got it figured out... but I'm not sure if it is working properly or not... Oh wait, it just takes a long time to work. I got it.

Except now I have this error:

this.addLines is not a function
[Break on this error] } else if (1.2 == fbVersion) { greasemonkey.js (line 458)

[Atli]

O yea, sorry. Forgot to hunt down that error. The script worked fine though. Just some weirdness that Greasemonkey does sometimes.

I've edited my earlier post with the fix.
I also uploaded it to my server, so it can be installed directly by just clicking the link.
http://atli.advefir....odetags.user.js

[RedSon]

Another bug I see is that sometimes there is an extra line break or newline character at the bottom of the code example that gets a line number. Got a patch to trim extra whitespace at the end?

Also do me a favor and update the title of the script with the version number so I know which one I've got.

[moopet]

Actually, while the subject of CODE bits is open, what's with the code block only taking up part of the available width? It's about 50% width when it could be 100%. Or am I the only one to see this?

[Frinavale]

You're not the only one who sees this.
I agree that increasing the width could help with having to scroll horizontally.

[mahcuz]

moopet, on 09 June 2010 - 12:32 PM, said:

Actually, while the subject of CODE bits is open, what's with the code block only taking up part of the available width? It's about 50% width when it could be 100%. Or am I the only one to see this?

More like 75%, but I see it too. That extra space should be utilized, agreed.

[AdamSpeight2008]

I think it would be fantastic if we (dic) had this style of syntax highlighter.
We could then have two different code buttons, without a particular line highlighted and with.

[skyhawk133]

AdamSpeight2008, on 09 June 2010 - 02:46 PM, said:

I think it would be fantastic if we (dic) had this style of syntax highlighter.
We could then have two different code buttons, without a particular line highlighted and with.

Yeh, I love that highlighter, we've tried it in the past. Can't remember what the issue was... probably something with line breaks or something funky. Version 2.0 looks like it may have fixed that.

The only issue I can find is that it seems you HAVE to specify a language. I'm looking through the BBCODE documentation to see if I can dynamically populate the "brush" (language) some how.

Any other suggestions/scripts that you've seen in the wild, especially on forums?

[moopet]

skyhawk133, on 10 June 2010 - 01:43 AM, said:

AdamSpeight2008, on 09 June 2010 - 02:46 PM, said:

I think it would be fantastic if we (dic) had this style of syntax highlighter.
We could then have two different code buttons, without a particular line highlighted and with.

Yeh, I love that highlighter, we've tried it in the past. Can't remember what the issue was... probably something with line breaks or something funky. Version 2.0 looks like it may have fixed that.

The only issue I can find is that it seems you HAVE to specify a language. I'm looking through the BBCODE documentation to see if I can dynamically populate the "brush" (language) some how.

Any other suggestions/scripts that you've seen in the wild, especially on forums?

Well, there're quite a few scripts to do it, and I've tried several. Most are really slow or glitchy still (even in 2010, grumble grumble). Some, like this one: http://code.google.c...-code-prettify/ "Supports all C-like, Bash-like, and XML-like languages. No need to specify the language" but I haven't tried it.

[skyhawk133]

That's the one we're using moopet. Have they updated it any to include line numbers and such?