javascriptcoderay

Get line number in html by JavaScript


I've highlighted the ruby code by CodeRay and now I'd like to know on which line number user clicked. This line number should correspond to line nuber in source code. Which is the best way to do this?


Solution

  • Here's how I resolved this question. I generated html with the numbers by CodeRay. But CodeRay doesn't have accurate documantation on official site, so after looking throught the CodeRay's code I've made it like this:

    content = CodeRay.scan(file.read, :ruby).div(:css => :class, 
                                                     :line_numbers => :inline)
    

    The mode :line_numbers => :table doesn't work properly in my case that's I should've use :inline mode. If you don't like numbers in your html page i think you can remove it by css or javascript. Then I wrote small javascript function:

    $('span').not('.no').click(function(e) {
        var target = $(e.target);
        target.effect('highlight', {}, 'slow');
        var i = 0;
        var prev_element = target.prev();
        var element;
        while (i++ < 10) {
            element = $(prev_element[0]).context;
            if (element.className == "no") break;
            prev_element = prev_element.prev();
        }
        if (i > 9) {
            alert("Some problem with the finding number line");
        }
        else {
            var line_number;
            if (element.children.length > 0) line_number = element.children[0].innerHTML;
            else                             line_number = element.innerHTML;
            alert(line_number);
        }
        e.stopPropagation();
    })
    

    Any suggestions and improvements will be appreciated.