Reputation: 382
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
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
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
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
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