CODEWITHSUNDEEP
javascriptsyntaxhighlight
Vahid
Vahid

Reputation: 382

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/

Upvotes: 9

Views: 16131

Answers (4)

scessor
scessor

Reputation: 16125

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.

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]);
    }
};

Upvotes: 13

Kishan Donga
Kishan Donga

Reputation: 3203

select Any one prebuilt version of highlight.js with 22 commonly used languages is hosted by following CDNs:

cdnjs
==========

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

jsdelivr
==========

    <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>

The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:


    <script>
         hljs.initHighlightingOnLoad();
    </script>

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute


    <pre>
    <code class="html">
        This is heading 1
    </code>
    </pre>

for more information refer this two links.
https://highlightjs.org/usage/
https://highlightjs.org/download/

Upvotes: 0

Lorenz Lo Sauer
Lorenz Lo Sauer

Reputation: 24740

One special, related circumstance, though which is too long for a comment:

Invocation upon the DOM completion event will not suffice on the new blogger.com / blogspot Dynamic View Templates and probably other similar sites, as in this case the DOM is actually loaded but merely consists out of an injection-ready div element and the DOM content is injected via a JavaScript method, which itself is called in a set-timeout:

  setTimeout(function() {
    blogger.ui().configure().view();
  }, 800);

In order for the syntaxhighlighting to work then, the complex DOM tree must be finished. One solution is through triggering hljs.initHighlightingOnLoad(); or the custom highlightBlock function after a generous timeout period.

  setTimeout(function() {
    blogger.ui().configure().view();
  setTimeout(function() {$('pre code').each(function(i, e) {hljs.highlightBlock(e)});}, 2000);
  }, 800);

Upvotes: 1

Ian
Ian

Reputation: 50933

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.

Upvotes: 8

Related Questions