(rehype-highlight) How do I register a language and alias it so that it replaces a built-in lanugage

[NullVoxPopuli]

I have a hi-fi highlighter over at highlight.js-glimmer -- where, Glimmer is a superset of both HTML and Handlebars (syntactically), and for my purposes, I would like to use my highlighter instead of the handlebars one when I parse markdown files with hbs-tagged cofedences.

I have a test that I'm running with vitest, atm, and I'm noticing that the language identification is incorrect:

the entirety of my test is here:

'use strict';

import { describe, it, expect } from 'vitest';

import { rehype } from 'rehype';
import { stripIndent } from 'common-tags';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import highlight from 'rehype-highlight';
import html from 'rehype-stringify';

import { glimmer } from 'highlightjs-glimmer';

function tag(klass, children = []) {
  let _children = Array.isArray(children) ? children : [children];

  return `<span class="hljs-${klass}">${_children.join('')}</span>`;
}


function parse(text) {
  return rehype()
    .data('settings', { fragment: true })
    .use(markdown)
    .use(remark2rehype)
    .use(highlight, {
      aliases: { hbs: 'glimmer', handlebars: 'glimmer' },
      languages: {
        // js: require('highlight.js/lib/languages/javascript'),
        glimmer,
      },
    })
    .use(html)
    .processSync(text)
    .toString();
}

describe('Rehype', () => {
  it('works', async () => {
    expect(
      parse(stripIndent`
      \`\`\`hbs
        {{@arg}}
      \`\`\`
      `)
    ).toEqual(
      '<pre><code class="hljs language-glimmer">  ' +
        tag('punctuation mustache', ['{{', tag('punctuation', '@'), tag('params', 'arg'), '}}']) +
        '\n' +
        '</code></pre>'
    );
  });
});

But here is the output:

  - <pre><code class="hljs language-glimmer">  <span class="hljs-punctuation mustache">{{<span class="hljs-punctuation">@</span><span class=…
  + "<pre><code class="hljs language-hbs">  <span class="hljs-punctuation mustache">{{<span class="hljs-punctuation">@</span><span class="hlj…
    </code></pre>

the I'm getting language-hbs instead of language-glimmer.

Is this a bug?

Here are my versions:

    "highlight.js": ">= 11.4.0",
    "rehype": "^12.0.1",
    "rehype-highlight": "^6.0.0",
    "rehype-stringify": "^9.0.3",
    "remark-html": "^15.0.1",
    "remark-parse": "^10.0.1",
    "remark-rehype": "^10.1.0",
    "unified": "^10.1.2",
    "vitest": "^0.24.1"

I have a PR where I'm updating a bunch of stuff, since it's been a while NullVoxPopuli/highlightjs-glimmer#218

And I've pulled that into codesandbox here: https://codesandbox.io/s/github/NullVoxPopuli/highlightjs-glimmer/tree/updates
but codesandbox appears broken

[wooorm]

I’m not sure how to do that with highlight.js.
If you can show some code that shows how to do that there, we can figure out what’s missing (or not) here?

[NullVoxPopuli]

I've figured out (with the help of the Codesandbox folks from twitter) how to get this working: https://codesandbox.io/p/github/NullVoxPopuli/highlightjs-glimmer/updates?file=%2F.codesandbox%2Ftasks.json&selection=%5B%7B%22endColumn%22%3A16%2C%22endLineNumber%22%3A10%2C%22startColumn%22%3A16%2C%22startLineNumber%22%3A10%7D%5D

The ESM Tests task demonstrate the problem.
The CJS Tests task demonstrate the "working state" where language-glimmer is used -- the CJS tests use the unified family of dependencies before the ESM transition -- so I'd consider this behavior in the OP a regression, I think

[wooorm]

Isn’t this then likely to do with how ESM works, unrelated to this project?

[NullVoxPopuli]

doh, nevermind. apologies -- something is goofy with my test setup, I think.

I had skipped tests, and thought they were passing