Install in Existing Highlight.js?

[engineerjoe440]

Definitely a noob here...

How should I go about "installing" this in Highlight.js? I'd like to use it with marp for some presentations I'd like to automate putting together. I've found that there's a highlight.js folder underneath my marp installation. Can I just throw some of these files in there and kick a few things to get highlight.js to recognize the new syntax?

Thanks!!!

[Serhioromano]

I am actualy myself would like to know the answer. I think @marcoscaceres knows the answer.

Is it shipped with ST support already or users have to install it separately?

[engineerjoe440]

Here's the list of languages that are installed currently under my highlight.js node_module:

So, I don't think I have it installed (unless I'm missing the name altogether). Let me know if I can provide any additional info!

[Serhioromano]

There is not iecst.js file. I also wounder why it is not there.

[marcoscaceres]

Oh, the installation info is missing from the README... you should copy/follow:
https://github.com/highlightjs/highlightjs-curl

@Serhioromano, you should npm publish this to npmjs. The folks like @engineerjoe440 can npm install highlightjs-structured-text to use it.

[Serhioromano]

Done. Added to NPM npm i highlightjs-structured-text and added usage instruction.

[Serhioromano]

@engineerjoe440 if you are successful, please tell me how it worked for you and how you made it work.
@marcoscaceres Why this highlight is not installed along with HLJS? YPu plan that all adoptations are installed separately?

[engineerjoe440]

@Serhioromano , @marcoscaceres ,
I'll give this a shot and let you know how it goes!!! Thank you so much!!!

[Serhioromano]

@engineerjoe440 any news?

[engineerjoe440]

Goodness!!! Forgive me for such a terrible response rate! I'm afraid I was caught up in other life events. I'm going to try to install now and will report back!

[engineerjoe440]

Gentlemen, I had quite the battle to finally get this working, but I think it was largely due to my own application.

Since my end-goal is to use this styling with marp, I needed to be able to directly reference the iecst language in markdown files that would be leveraged to generate presentations (*.pptx, *.html, *.pdf). Ultimately, I think due to the inner workings of Marpit (the marp framework) and how it leverages the highlight.js framework it did not function correctly as you both had suggested in the usage section of the README.

At any rate, I finally got this working, and I'm very excited! Let me document what I had to do to make this function with my marp installation. In brief, I manually added the *.js file to my existing marp installation and identified the index location and modified that registry accordingly.

1. Locate existing highlight.js installation location by finding dependent module (in my case marp). Then open directory (since I'm using Windows, I can use Explorer <path/to/marp/directory>
   

2. Navigate to the directory containing the module of interest, then navigate to the node_modules/highlight.js folder underneath the desired module. In my case, since I'm using marp-cli, I navigated to node_modules/@marp-team/marp-cli/node_modules/highlight.js/lib
   

3. Open the index.js file in a text editor and add a new line to register the iecst language.
   

4. Finally, navigate to the languages folder and add the iecst.js file. Here, for my application, I had to make some modifications. First, I fixed a curly-bracket issue (I'll open a PR to mark that). Second, I removed line 15, and lines 93-95, and removed the .definer from line 97. I've attached my modified file here.
   iecst.js

[Serhioromano]

@engineerjoe440 cool, everything works.

@marcoscaceres I tested this and here is what I discovered.

1. ST language is not delivered with hljs initialy. How do i add it there so that it is there by default and require no additional instalations?

2. I had to change fli in order fo it to work. Changed this

module.exports = function(hljs) {
    hljs.registerLanguage("iecst", hljsDefineIECST);
};

module.exports.definer = hljsDefineIECST;

to this

module.exports = hljsDefineIECST;

Why? Is it not compatible?

What I want basiacaly is that whenever hljs is installed or updated to latest version ST language support is there by default.

[engineerjoe440]

I've started poking around for this too, and I found this...

from here: https://highlightjs.readthedocs.io/en/latest/language-contribution.html

So I wonder if it's just a matter of updating that *.md file? @marcoscaceres , is there any more information that you're aware of?

[Serhioromano]

@engineerjoe440 I did all of that but then @marcoscaceres proposed to create separate repository and use new way to add language. So I did. I thought there is some build tool that installl all those languages in separated repositories.

I just wonder how to use it without modifications.

[engineerjoe440]

Hmm... I'll be interested to hear what @marcoscaceres has to say then! Thank you again for all of your support!

[yhatt]

Hi, I'm the author of Marp mentioned by this issue.

Generally direct patching to the source in node_modules is evil. There is smarter way if you just want to use in Marp:

# Install required modules into your local project
npm i @marp-team/marp-core @marp-team/marp-cli highlight.js highlightjs-structured-text

# and run Marp with customized engine
npx marp --engine engine.js your-slide.md

// engine.js
const { Marp } = require('@marp-team/marp-core')
const hljs = require('highlight.js')
const hljsDefineIECST = require('highlightjs-structured-text')

hljsDefineIECST(hljs);

module.exports = (opts) => {
  const marp = new Marp(opts)

  // Use custom highlight.js instance in Marp highlighter
  // The following is exactly same as https://github.com/marp-team/marp-core/blob/883e1d75ddf0bdf26a00cafd4f58d94a26fe4949/src/marp.ts#L92-L99
  marp.highlighter = (code, lang) => {
    if (lang) {
      return hljs.getLanguage(lang)
        ? hljs.highlight(lang, code, true).value
        : ''
    }
    return hljs.highlightAuto(code).value
  }

  return marp
}

An added syntax will work without patching an original highlight.js. It's following a general way for using 3rd-party highlighter in highlight.js too.

Good luck.

[engineerjoe440]

@yhatt, thank you very much for sharing that! That is very useful information!

[joshgoebel]

I only skimmed this thread.

The easiest way to use a 3rd party grammar is via the instructions (just add an additional <script> tag to your webpage, or an additional npm require to your project.

There is no need to "add it to highlight.js".

That said if you do want to build (and test) a 3rd party language inside a checkout of highlight.js (usually on necessary for very custom builds or testing) you can just checkout the grammar repository into the extra folder and then all the existing build/test tools will "just work" provided the grammar follows the "spec".

And final builds can include that language (if it's installed in extra) if you request it:

./tools/build.js -t node :common custom_language

Again, 99% of users should not need to do this.

---

Also if you REALLY want to "add it to highlight.js" you can just do that by concatenation... (as you can with any independent JS files). On a Unix system:

cat highlight.min.js custom_language/dist/custom_language.js > highlight-more.min.js

This assumes the 3rd party grammar provides dist, which is standard. This repository really should add that.

[joshgoebel]

@Serhioromano

1. Checkout the grammar repo into extra
2. Run build -t browser
3. Add the dist folder to your repository and commit

[joshgoebel]

These steps will create dist folder that you can commit to your own repo to make it easier for users to use your grammar with only a single line of code.