How to implement this Javascript to Blogger?

Question

Please help, I can't implement this javascript to my Blogger...

(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
        }
    }
})();

You can see this Javascript work fine here : http://jsfiddle.net/tovic/AbpRD/1/

Possible duplicate of [How can I add JavaScript inside Blogger?](http://stackoverflow.com/questions/6449733/how-can-i-add-javascript-inside-blogger) — Lucky, May 14 '17 at 18:33

score 0 · Answer 1 · answered May 23 '17 at 10:14

If you are seeing that following type of error when you try to add this JavaScript snippet in your theme code -

Error parsing XML: The content of elements must consist of well-formed character data or markup.

Then to resolve this error, use any of the following methods -

1. Wrap the code within a CDATA directive in the script tag. The code will look like -

<script>
//<![CDATA[
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
        }
    }
})();
//]]>
</script>

The only downside of this approach being that Blogger XML parser will ignore any data layout tags (like for example <data:blog.homepageUrl/>) within the CDATA directive. Rather than replacing them with their actual values, it will not interpret them and show them as is.

2. Escape the following characters in your code -

" is replaced with "
& is replaced with &
< is replaced with <
> is replaced with >

After escaping, the code should look like -

<script>
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i & lt; pl; i++) {
        pre[i].innerHTML = '&lt;span class=&quot;line-number&quot;&gt;&lt;/span&gt;' + pre[i].innerHTML + '&lt;span class=&quot;cl&quot;&gt;&lt;/span&gt;';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j & lt; num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '&lt;span&gt;' + (j + 1) + '&lt;/span&gt;';
        }
    }
})();
</script>

The data layout tags will remain functional when following this method. Remember to not escape <> surrounding the data layout tag (aka <data:blog.homepageUrl/> will work but not <data:blog.homepageUrl/>)

3. If no data layout tags have to be included in the JavaScript. Then you can add it in an HTML/JavaScript gadget via the Layout tab instead of directly including it in the theme code.

How to implement this Javascript to Blogger?

1 Answers1