Geek Answers Handbook

Highlight syntax in pre-tags using highlight.js

There is a powerful powerful javascript code for the syntax:

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

but this code only works with <pre><code></code></pre> blocks, which is my problem, I like to use only <pre></pre> because Chrome and Safari do not include line breaks for <pre><code></code></pre> when copying and past code, but for <pre></pre> it works.

there is also a user manual, but to be honest, I can’t understand what I have to do to highlight only the pre tags. user manual is here:

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

+8
javascript syntax highlight
source share
4 answers

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

Here is the version without jQuery .

=== UPDATE ===

Here is an example without the <code> .

 window.onload = function() { var aCodes = document.getElementsByTagName('pre'); for (var i=0; i < aCodes.length; i++) { hljs.highlightBlock(aCodes[i]); } };
+11
source share

It seems to me that you just need to change your initialization to:

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

and do not use "pre code" for the jQuery selector. Not sure if this is how the plugin is used, but I would have thought that you need to change ...

EDIT:

If you are not using jQuery, you can 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 should be in window.onload or something similar to make sure the DOM is ready for manipulation.

+8
source share

One special circumstance related to this, although too long for comment:

A call to the DOM completion event will not be sufficient for new blogger.com/blogspot dynamic viewing templates and, possibly, for other similar sites, since in this case the DOM is loaded, but just consists of a div element prepared for injection, and the contents of the DOM are entered using the JavaScript method, which itself is called in standby mode:

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

In order for the syntax shortcut to work then, you need to complete the complex DOM tree. One solution is to run hljs.initHighlightingOnLoad(); or a custom highlightBlock function after a generous wait period.

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

select Any preview version of highlight.js with 22 commonly used languages ​​is located in the 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 associated with the library along with one of the styles and calling initHighlightingOnLoad:

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

This will find and highlight the code inside the <pre> <code> tags; he is trying to automatically detect the language. If automatic discovery does not work for you, you can specify the language in the class attribute

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

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

0
source share

More articles:


All Articles