Discuss: Website/browser build is not intended for use with Node.js.

[avih]

var <any-name-hljs-included> = require('./highlight.pack'); fails with ReferenceError: hljs is not defined. when executed in node.js.

This happens when downloading and extracting highlight.zip from https://highlightjs.org/download/ (tested both the default selected languages or with just one - javascript)

But it doesn't fail (and I can later use it nicely) if I build it on my own with node tools/build.js javascript or any other languages which I tried.

This happens with 9.50 but also happened with 9.40 (worked when I build it, didn't from the download).

Looking at highlight.pack.js - both the downloaded and the one which I built, it seems that the code is supposed to work also in a module environment (tests for exports availability at the beginning - identical first few LOC at both files), but it doesn't with the download.

Is it a bug? expected? IMO it should be possible to require it also with the downloaded package.

[isagalaev]

We have different build targets for node.js and for the browser/AMD environment. The highlight.pack.js you're getting from the site is the browser variant. Have a look here: http://highlightjs.readthedocs.io/en/latest/building-testing.html

[avih]

I know. I'm saying that if you build for the browser, like so: node tools/build.js -t browser :common then the resulting highlight.pack.js can still be used with node, but if you download it from the site then it cannot be used with node.

[isagalaev]

Aha… Then it might be due to the bug #1220 that I fixed just yesterday. Could you please check again?

[avih]

I just checked. It still cannot be used from node when downloading from the site, but can be used from node when building locally for the browser (with 9.6.0 - same as it was on 9.5.0 and 9.4.0).

At the site download, I selected a single language: javascript and clicked download.

Inside the downloaded zip I opened highlight.pack.js in an editor, and it starts with /*! highlight.js v9.6.0 | BSD3 License | git.io/hljslicense */ so this is the latest version.

I created a test file test.js which contains a single line: var x = require('./highlight.pack'); and ran node test.js .

It fails with the downloaded highlight.pack.js, but works with highlight.pack.js which I built myself for the browser.

I then unminified (or at least beautified) highlight.pack.js which I downloaded - using http://jsbeautifier.org/

This code tries to use hljs at the global scope (towards the end of the file):

});  // <-- this is the end of the big function
hljs.registerLanguage("javascript", function(e) {
    return {
    // ... the rest of the javascript support is here

However, there's no global object hljs (because the AMD/CommonJS detection sees exports when it runs in node, so it doesn't create it), so it fails.

When I build it myself for the browser, it doesn't try to use a global hljs object. Instead, the registration looks like this, and it's inside the big function where e exists:

    }, e.registerLanguage("javascript", function(e) {
        return {
        // ... the rest of the javascript support is here

and it works in node.

[avih]

Where is the website code which composes the package (according to the languages the user chooses via checkboxes) which is then downloaded?

[entibo]

Quick fix for anyone else having this problem:

(highlight.pack.js)

!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?
->
!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof undefined?

[isagalaev]

A quick update. This is due to a discrepancy between the browser build and the CDN build. The site uses the latter to construct zips on the fly using simple concatenation of pre-compressed highlight.js and language files. At some point the real browser build started putting languages inside the contents of highlight.js. I'm not yet sure how best to fix it.

Out of curiosity, why would you want to use a browser build from node?

[avih]

Because it's simpler/quicker/easier to check boxes and download a custom pack instead of building it.

I have a small node script which highlights source code for the console and uses hljs as backend (still not public but It'll be at some stage) and it doesn't have other dependencies, so you just drop the pack at the same dir as the script and it works - except it doesn't now due to this issue (but it does work if I build the pack myself).

I wanted to let users pick the languages they need and download the latest package themselves instead of asking them to build the node package or providing packages myself.

[isagalaev]

Seems reasonable enough, even if unusual. And I want this fixed anyway. In the meantime however, you could probably just use the actual node build? If you need to constrain languages used in auto-detection it's as simple as hljs.configure({languages: [ ...]}) or pass the same language list as a second argument to highlightAuto() http://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset

[avih]

Yeah, I could always just create a pack with all the languages and post it someplace and update it when hljs updates - it's not a big file anyway, so this issue is not blocking me in any way.

Re auto detection, I actually found it a bit slow (relatively speaking), and found out that if I maintain a map of file extensions to languages as config then it works quite a bit faster than auto-detection (but I still have auto-detection as fallback).

[isagalaev]

I could always just create a pack with all the languages and post it someplace and update it when hljs updates

Why not the actual node package from npm https://www.npmjs.com/package/highlight.js? It has zero dependencies, just as the browser one.

[kurifodo]

+1, I ran into the same issue described above and would love the fix to be in place for downloading the custom pack of languages, based on check box selections, instead of having to build it manually.

Thanks for creating this great tool, @isagalaev.

[TinoN]

@entibo's suggestion worked for me (in Laravel 5.5)
in app.js

...
require('./highlight.pack.js').initHighlightingOnLoad();
...