Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highlight syntax in pre tags with highlight.js

there is a light powerful javascript code for syntax highlight here:

http://softwaremaniacs.org/soft/highlight/en/

but this code just work with <pre><code></code></pre> blocks, which is my problem, i like to use just <pre></pre> because Chrome and Safari don't include line breaks for <pre><code></code></pre> when copy and past the code, but for <pre></pre> it's work.

there's a user guide too, but honestly i can't understand what must i do to highlight just pre tags. user guide is here:

http://softwaremaniacs.org/soft/highlight/en/description/

like image 977
Vahid Avatar asked Jun 07 '12 17:06

Vahid


2 Answers

The current version of chrome has no problems with line breaks in <code> tags.
E.g. try this example in chrome.

Here a version without jQuery.

=== UPDATE ===

Here an example without the <code> tag.

window.onload = function() {
    var aCodes = document.getElementsByTagName('pre');
    for (var i=0; i < aCodes.length; i++) {
        hljs.highlightBlock(aCodes[i]);
    }
};
like image 54
scessor Avatar answered Oct 08 '22 18:10

scessor


I think you just need to change your initialization to:

$("pre").each(function (i, e) {
    hljs.highlightBlock(e);
});

and don't use "pre code" for the jQuery selector. Not sure if that's exactly how the plugin is used, but I would think that's what you need to change...

EDIT:

If you're not using jQuery, you may want to try something like:

window.onload = function () {
    var allPre, i, j;
    allPre = document.getElementsByTagName("pre");
    for (i = 0, j = allPre.length; i < j; i++) {
        hljs.highlightBlock(allPre[i]);
    }
};

It needs to be in window.onload or something similar to make sure the DOM is ready for manipulation.

like image 24
Ian Avatar answered Oct 08 '22 18:10

Ian