question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use highlight.js outside the browser?

See original GitHub issue

I’m considering pre-highlighting code on the server-side to avoid making users download the highlight.js library, but I’m not exactly sure how to do it.

Say I have a README file in Markdown, and I use marked to parse it into HTML:

require("marked").parse(require("fs").readFileSync("./README.md").toString())

Now I have this HTML:


<h1 id="jiggle">jiggle</h1>
<p>Jiggle arrays to slightly rearrange their values</p>
<h2 id="installation">Installation</h2>
<pre><code class="lang-sh">npm install jiggle --save
</code></pre>
<h2 id="usage">Usage</h2>
<pre><code class="lang-js">var jiggle = require(&quot;jiggle&quot;)

// The jiggle() function takes an array as input and returns an array
jiggle([0,1,2,3,4,5,6,7,8,9])
// [ 1, 2, 0, 4, 3, 5, 6, 7, 9, 8 ]

// It can also jiggle strings
jiggle(&quot;jabberwocky&quot;)
// jbbeawockyr

// It always returns a new object without altering the original
var orig = [&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;]
var dupe = jiggle(orig)
// orig: [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;]
// dupe: [&#39;a&#39;,&#39;b&#39;,&#39;d&#39;,&#39;e&#39;,&#39;c&#39;,&#39;f&#39;]

// And if you like jiggling you can keep on doing it
jiggle(jiggle(jiggle(&quot;supercalifragilisticexpialidocious&quot;)))
// supcaerligralitiiscpefaldioxciosiu
</code></pre>
<h2 id="tests">Tests</h2>
<pre><code class="lang-sh">npm install
npm test
</code></pre>

How would I use highlight.js to apply syntax highlighting markup to this HTML string? Please forgive me if I missed the documentation somewhere that explains this. 😃

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
sourrustcommented, Sep 18, 2014

There is documentation in marked for this. The example only uses auto highlighting when it is possible to specify a language like the Pygments example.

var fs     = require('fs');
var hljs   = require('highlight.js');
var marked = require('marked');

var markdownString = fs.readFileSync('./README.md');

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlight(lang, code).value;
  }
});

var output = marked(markdownString);
2reactions
xcatliucommented, Dec 11, 2014

Give a compatible version:

marked.setOptions({
  highlight: function(code, lang) {
    if (typeof lang === 'undefined') {
      return hljs.highlightAuto(code).value;
    } else if (lang === 'nohighlight') {
      return code;
    } else {
      return hljs.highlight(lang, code).value;
    }
  }
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use highlight.js
// first, find all the div.code blocks document.querySelectorAll('div.code').forEach(el => { // then highlight each hljs.highlightElement(el); });.
Read more >
Highlight.js - mikesir87's blog
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty...
Read more >
Prism.js
If you want to opt-out of highlighting but still use plugins like Show Invisibles, add use language-plain class instead. Manual highlighting. If you...
Read more >
How can I turn off auto language detection in highlight.js and ...
It's possible to disable highlight.js auto language detection with hljs.configure({languages:[]}) ...
Read more >
How do I add highlight.js to my website? - Quora
You can get highlight.js as a hosted, or custom-build, browser script or as a server module. Right out of the box the browser...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found