Is it possible to add own language descriptions?

[josor001]

Hi everybody,

first of all many thanks for the great implementation of highlightjs in Angular. Works like a charm and especially the StackBlitz examples really help to get started!
I have a question regarding the integration of custom languages. I'm currently working on a small web platform where we want to represent code in a textual modeling language we've invented. I have already built a corresponding HighlightsJS module ( available here https://github.com/josor001/hljs-lemma ). It's still a prototype, but it definitely works in the dev-tools.

Is there a proper way to add my language description, which is currently not yet integrated into the main HighlightsJS repo, into the installed ngx-zighlightjs version in my angular project?
My language project is written in JavaScript according to the Highlights guidelines, i.e. it's not a TypeScript module that I could read in via import(...). Do I need a wrapper or something? Or is there a service that I can inject and than call registerLanguage(...) ?

Would be happy if someone of you has a hint :-) I'm not the best TS/JS programmer myself. Normally active on the backend side of life, but this project is definitely fun!

If there is no elegant solution I intend to just fork highlightjs, add my language and then build the package locally but this feels somewhat underwhelming.

[MurhafSousli]

Hi @josor001, you should be able to get it to work, try to reproduce what you've tried in a stackblitz https://stackblitz.com/edit/ngx-highlightjs?file=src%2Fapp%2Fapp.module.ts, don't forget to add your language file in the stackblitz and I can look into it

[josor001]

Hi @MurhafSousli ,

thanks for offering to help. I really appreciate :-)!
In order to make the language easier to use and my struggle more comprehensible, I published my language package on npm (another "first time" for me with this project): https://www.npmjs.com/package/hljs-lemma .

I tried two different approaches and prepared a stackblitz for each.

My first attempt was to use my npm package and just import the lemma.js file, however, I seems like I need to wrap it somehow as a module (guess this is related to the promise that "languages" expect). I added the language file under assets/lemma.js, however, this file is not actually used and just for reference. I already added a LEMMA code snippet in the home component.
StackBlitz 1

In my second attempt I tried to import the lemma.js directly in the constructor of the home component. However, this is probably more desperation and feels like a hail mary from my side...
StackBlitz 2

I would be glad for any pointers and/or reading material of how to solve the issue. As mentioned, I am kinda new to the whole TS/JS/Angular world :-)

[josor001]

Hi @MurhafSousli ,
I hope I am not stressing you. Have you had the chance to take a look?

[josor001]

Hi guys,

so I finally found the drive to give my issue another try. After tinkering for a couple of hours I was able to find the solution which is painfully easy (as almost always for programming issues :D).

So basically the issue was twofold.

In order to use the import('hljs-lemma/src/languages/lemma') statement to import my language definition, I needed to provide a typescript module definition. I believe we currently have the same issue for the lineNumbersLoader: () => import('highlightjs-line-numbers.js'), statement in every stackblitz #234 .
To fix this, it is necessary to either provide a d.ts file that declares the module inside the npm package or, if you do not have control over the npm package, declare it externally. I needed to declare it externally. I created a folder @local-types/hljs-lemma in the src-folder of my project and created an index.d.ts file there with the entry

/// <reference types="node" />
declare module 'hljs-lemma/src/languages/lemma';

To fix the line number problem you can do the same, create a folder @local-types/highlightjs-line-numbers.js with index.d.ts file and lines

/// <reference types="node" />
declare module 'highlightjs-line-numbers.js';

This external declaration is of course only a crutch and it would be nicer if the declaration was done directly in the NPM modules themselves. Compiling new highlightjs grammars just unfortunately doesn't work if the folder itself contains a module declaration. Maybe there is a better solution for this on the compilation process of highlightjs.

After that I could load the imported language but the syntax highlighting via the directive still didn't work, after some investigation I found out that there was a small bug in the grammar as I had marked some characters as illegal that weren't, i.e., my code snippets that I wanted to highlight always contained illegal characters which caused the highlighter to do nothing. I released a new version of my grammar that fixed the illegal characters and now everything works like a charm 👍