Highlight.js: How can I use use highlight.js in TS without all the languages?

[rtfpessoa]

I read in the README about importing import * as hljs from 'highlight.js/lib/highlight.js'; instead of the index but this does not have types. Anyone know how I can get types for the file instead of the module?

[joshgoebel]

The readme answers this and has an example also:

https://github.com/highlightjs/highlight.js#commonjs

Require whichever languages you need individially, then register them. Just look at the index.js file to see how it's done. IE, you're just building your own index by hand really.

[rtfpessoa]

@yyyc514 that is exactly what I stated in my question.
I know that you have an example on the README but I cannot make it work without hacks in Typescript, since the projects has not typings for the highlight.js/lib/highlight.js file and just has for highlight.js orindex.js` file which forces all the languages.

[joshgoebel]

Sorry for any confusion.

since the projects has not typings for the highlight.js/lib/highlight.js file and just has for highlight.js or index.js

I think you're asking a Typescript specific question. I'm having trouble understanding. Where is it that we have (or provide) types for the library itself if you require the whole thing? Our NPM package is just a bunch of JS files we build.

So I'm not sure why you have types for one thing but not others. Someone more familiar with TS might have to jump in here or you might have to make some suggestions on how we might go about even fixing this - since right now I haven no idea.

[rtfpessoa]

This is definitely a TS specific question, maybe I could have pointed to the source of the types.
They are here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/highlight.js/index.d.ts and were contributed by @nikeee, @sourrust and @joshuakgoldberg, maybe they have some suggestion regarding this?

[joshgoebel]

Feels like perhaps this issue should be filed/asked against the DefinitelyTyped repo, perhaps? We don't provide typescript types with our npm distro.

[JoshuaKGoldberg]

Hi! Agreed. This feels like two questions:

• Can we improve the typings of highlight.js in DefinitelyTyped?
• How do you declare these types in TypeScript?

FWIW, https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules (or if that's not clear, https://stackoverflow.com/questions/44058101/typescript-declare-third-party-modules) might be helpful for both.

[rtfpessoa]

Thanks for the help here I opened an issue in DefinitelyTypedto follow with the discussion.

[KingDarBoja]

Facing some issues with this library as the current documentation (CommonJS section), states that we should import the core file instead of the default import.

Therefore it is likely to be more efficient to import only the library and the languages you need:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

However, trying to do on my Angular 9 app.component.ts file, I get this error:

Cannot find module 'highlight.js/lib/core'.

[joshgoebel]

Please see the stable documentation:

https://github.com/highlightjs/highlight.js/tree/9-18-stable

OR use the v10 beta:

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

[KingDarBoja]

@yyyc514 I didn't know there was a different npm package for the v10 but glad to see your quick response 👍

The current readme points to the old npm package.

[joshgoebel]

Yeah, there is an open PR to change the readme to add the new package location. I just published the beta to it's new location today and we're still trying to sort out the proper transition. I think now that we've published it to both places we may have made things more difficult, but I've reached out to NPM support for help to see about the best path forward.

[joshgoebel]

CC @nikeee, @sourrust and @JoshuaKGoldberg

Could any of you help? I'd like to move the type definitions into our repository (so we keep them up-to-date as the library changes, but I'm having a heck of a time figuring out how to do this or if it's even possible). Could any of you look at:

https://github.com/highlightjs/highlight.js/issues/2603

[dvkndn]

A workaround for anyone want to use TS with the core import:

import hljs from "highlight.js";

declare module "highlight.js/lib/core" {
    export = hljs;
}

@joshgoebel I think we can also put this into the type definition :D

---

Update: wait you already have that in the definition file.. why it doesn't work I don't know

---

Update 2: Oh it turns out you need to put the "d.ts" in @types/lib/core too https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html#library-file-layout

---

Update 3: ok I managed to get this to work (this is for highlight.js maintainer, while normal users can just use the workaround above in the mean time)

Please see both the content and the path to that file