v10.0.0 Beta is available.

[joshgoebel]

Needed: Help testing upgrading from v9 to v10 beta

We're now publishing betas to NPM. If anyone would like to help test the beta, please help us do so. Read the VERSION_10*.md documentation. There are breaking changes but for many people it should still largely be a drop-in upgrade.

For v10 and onward we're moving into the highlightjs npm organization to keep things grouped nicely (though HLJS keeps it's top-level URL):

https://www.npmjs.com/package/highlight.js https://www.npmjs.com/package/@highlightjs/cdn-assets

In the future we many want to consider the labeling of pre-releases. This release should be stable and production ready. All tests are green. We'd just like one last chance to see if their are an issues in the real world before we go wide.

[KingDarBoja]

This is my first time trying out the library by using Teradata Covalent Text Editor component and so far everything is working fine on a basic setup using Angular 9.

However, there are few issues with the library itself, as I had to dig into the options in order to provide some basic features.

~1. The toolbar icons doesn't show if setting toolbar: true. Instead, I had to pass each icon name as array of strings instead of default ones.~

2. Loading a style from the package does work BUT the background hasn't the correct css style.

The below image correspond to atom-one-dark css style being applied but notice the code tag has no html class.

If I add it to the pre tag, now the background css has the correct styling:

[joshgoebel]

toolbar icons

Sounds like your environment. HLJS has no toolbar or toolbar icons.

BUT the background hasn't the correct css style.

Can you create a standalone simple HTML page that shows a reproducible problem or a jsfiddle... just HTML/CSS/highlightjs, not mixed with Angular or other libraries?

I just built the browser build quickly and pulled up the demo and all the styles seem to apply just fine... when HLJS first runs it should auto-add hljs to ever pre code that's not marked to be ignored. Without further evidence I'd guess it's something in your environment.

Are there any errors from HLJS in your console? You might try adding hljs.debugMode() also and see if that provides any more information errors.

[KingDarBoja]

@yyyc514 Ignore the first thing, I got confused with another library which makes use of HighlightJS (EasyMDE).

About the css style, I will provide a StackBlitz as requested as this could be related to Angular not properly applying the css style.

[joshgoebel]

HTML takes control of the DOM itself (at least the <pre><code> pieces) so you might have to jump thru hoops to work with Vue, React, Angular... so that they don't just mess it up again. Someone who wanted better first party support should help build plugins for those libraries - we'd be more than willing to offer assistance I think, but that's not part of the core library. Also wouldn't surprise me if someone has already done that.

For example (one example): http://bvaughn.github.io/react-highlight.js/

[KingDarBoja]

Looks like there isn't any error after setting hljs.debugMode(), the only thing showing up is a marked warning.

helpers.js:227 marked(): sanitize and sanitizer parameters are deprecated since version 0.7.0, should not be used and will be removed in the future. Read more here: https://marked.js.org/#/USING_ADVANCED.md#options

But once again, don't think it is related to highlight library.

What I find strange is that the css styling isn't being applied to <pre><code> pieces. I will try to find the root cause but besides that, everything seems to be fine!

[joshgoebel]

Wouldn't surprise me if it working just fine is but Angular is changing it back when it does some other sort of dynamic update and redraws the content. Not sure why the inner content would be immune though... but these rendering engines are complex and complicated beasts.

Our code is trivial, pure DOM:

block.innerHTML = result.value;
block.className = buildClassName(block.className, language, result.language);

[KingDarBoja]

Being honest with you, I have no idea why it doesn't work on my Example StackBlitz 🙈 Not used to write JavaScript these days.

[joshgoebel]

I have no idea. Not familiar with that service and what it does. Your HTML files is missing the key HTML tags, and has no script tags, etc... so hard to judge anything without seeing what is actually happening. If the services makes it easy to see that, I didn't see anything...

And I never saw any output in console even if I added a manual log line, which is a bad sign.

[joshgoebel]

I changed this topic to make it more focused on "upgrading" testing, which is what we need.

[KingDarBoja]

Sorry for the early code, I tested again and passed the generated HTML code and also printed out to the console.

I think this is what you were looking for. The code renders nicely but still missing the hljs css class on code tag.

NOTE The StackBlitz service has its own console and its output is shared with the Chrome Dev Tools (only if using console methods like console.log).

[joshgoebel]

It works if I add:

var blocks = document.querySelectorAll('pre code');
blocks.forEach((b) => {
  console.log(b);
  hljs.highlightBlock(b);
})

Which is all the onload hook does... So I'd say something in this environment messes with the loading process and breaks things (perhaps there isn't a DOM loaded hook in this fake browser environment?), so you'll have to do your own... which is also covered by the README.

This is likely the problem with Angular though, you need custom integration code you can't just call initHighlightingOnLoad because of how these frameworks take over things. I seem to recall old issues about this, you could check, but we don't officially support these frameworks - hence the need for plugin authors to step up. Or for users to read the API docs and find out how to integrate with libraries that use the DOM directly. Most frameworks have a way to do this.

[KingDarBoja]

@yyyc514 Hey mate, I just wanted to let you know I solved the issue by following your suggestion, the library works like a charm within the others libraries that uses HighlightJS under the hood.

[joshgoebel]

Great

[morgan3d]

With a fresh clone, I get an error in which the fs module appears to be undefined (it is installed on my machine):

Starting build.
Finished build.
Writing docs files.
Writing demo files.
Writing style files.
Preparing languages.
......................................
Building highlight.js.
(node:21703) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'writeFile' of undefined
    at buildBrowserHighlightJS (/Users/morgan/Projects/highlight.js/tools/build_browser.js:124:17)
    at <anonymous>
(node:21703) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:21703) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.```

[joshgoebel]

What build command? What content in extra? What OS version, etc.

No issues here (Mac OS X pre-latest) and all our CI builds (Linux) have been successful.

[joshgoebel]

const fs = require("fs").promises;

You need promises. If your Node is very old you might have a problem and need to update. We build against latest Node and Node LTS.

[joshgoebel]

If you wanted to make a tiny contribution that throws an error when the node version is too old that'd be awesome.

[morgan3d]

Excellent, thank you!

On Thu, Apr 9, 2020 at 8:56 PM Josh Goebel notifications@github.com wrote:

If you wanted to make a tiny contribution that throws an error when the node version is too old that'd be awesome.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/highlightjs/highlight.js/issues/2454#issuecomment-611822614, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6JHYWHXWDDCGOW7LZSW3TRLZVCPANCNFSM4LEVJPGA .