highlightjs-glimmer

glimmer syntax highlighting with highlight.js

Install

yarn add highlightjs-glimmer
# or
npm install highlightjs-glimmer

Compatibility

Requires: highlight.js >= v11

[^1]: remark-highlight.js is deprecated and cjs only

Usage

import hljs from 'highlight.js';
import { setup } from 'highlightjs-glimmer';

setup(hljs);

hljs.highlightAll();

• the javascript language must be registered before setup is called.
• setup must be called before any highlighting occurs.

Supported language tags:

<pre>
  <code class="language-{tag}">

where {tag} could be:

• glimmer
• hbs
• html.hbs
• html.handlebars
• htmlbars

NOTE because highlightjs-glimmer overrides the same aliases as highlightjs' handlebars grammar, to use the handlebars grammar align with the glimmer grammar, you'll need to use the full name in class

<pre><code class="lang-glimmer">...</code></pre>
<pre><code class="lang-handlebars">...</code></pre>

with await import(...)

When using ES Modules in browsers with a packager

let HIGHLIGHT;

async function getHighlighter() {
  if (HIGHLIGHT) return HIGHLIGHT;

  HIGHLIGHT = (await import('highlight.js')).default;

  let { setup } = await import('highlightjs-glimmer');

  setup(HIGHLIGHT);

  return HIGHLIGHT;
}

async highlight() {
  let hljs = await getHighlighter();

  let element = document.querySelector('...');

  hljs.highlightElement(element);
}

highlight();

API

• setup

  The convenience method for configuring everything related to glimmer highlighting. This wraps registerLanguage and registerInjections. For most use cases, this should be the only method you need.

• registerLanguage

  Convenience method for registering the glimmer template syntax with highlight.js under the name "glimmer"

• registerInjections

  Registers the glimmer-javascript grammar, and installes javascript, js, mjs and cjs as aliases of it

• glimmer

  The highlight.js grammar function for glimmer templates. This can be used to register the glimmer grammar without using the provided setup methods.

• glimmerJavascript

  The highlight.js grammar function for glimmer-javascript (gjs) files. This can be used to register the glimmer-javascript grammar without using the provided setup methods.

CDN Usage

Traditional Script Tags

<script type="text/javascript" src="https://github.com/NullVoxPopuli/highlightjs-glimmer/raw/main/cdn/path/to/highlight.min.js"></script>
<script type="text/javascript" src="https://github.com/NullVoxPopuli/highlightjs-glimmer/raw/main/cdn/path/to/highlightjs-glimmer/glimmer.js"></script>
<script type="text/javascript">hljs.highlightAll();</script>

ES Modules

At this time, highlight.js does not ship ES Modules to CDNs

<script type="text/javascript" src="https://github.com/NullVoxPopuli/highlightjs-glimmer/raw/main/cdn/path/to/highlight.min.js"></script>
<script type="module">
  import { glimmer } from '/cdn/path/to/highlightjs-glimmer/glimmer.esm.js';

  hljs.registerLanguage('glimmer', glimmer);
  hljs.highlightAll();
</script>

Node / cjs / require

const hljs = require('highlight.js');
const { setup } = require('highlightjs-glimmer');

setup(hljs);

hljs.highlightAll();

Only Node 14 is supported

Node ES Modules / import

import hljs from 'highlight.js';
import { setup } from 'highlightjs-glimmer';

setup(hljs);

hljs.highlightAll();

With Node 14, launch with

NODE_OPTIONS="--experimental-vm-modules" node your-module-script.js

Contributing

Debug with yarn debug -p 4201 Visit http://localhost:4201

Run Tets with yarn test or npm run test