Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nullvoxpopuli/highlightjs-glimmer
glimmer syntax highlighting with highlight.js
https://github.com/nullvoxpopuli/highlightjs-glimmer
ember emberjs glimmer glimmerjs hacktoberfest highlightjs
Last synced: 3 days ago
JSON representation
glimmer syntax highlighting with highlight.js
- Host: GitHub
- URL: https://github.com/nullvoxpopuli/highlightjs-glimmer
- Owner: NullVoxPopuli
- License: mit
- Created: 2021-04-06T00:58:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T00:06:15.000Z (5 months ago)
- Last Synced: 2024-05-01T23:23:41.790Z (5 months ago)
- Topics: ember, emberjs, glimmer, glimmerjs, hacktoberfest, highlightjs
- Language: JavaScript
- Homepage: https://hljs-glimmer.nullvoxpopuli.com/
- Size: 2.4 MB
- Stars: 13
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# highlightjs-glimmer
[](https://www.npmjs.com/package/highlightjs-glimmer)
[](https://lgtm.com/projects/g/NullVoxPopuli/highlightjs-glimmer/)
glimmer syntax highlighting with [highlight.js](https://github.com/highlightjs/highlight.js)
## Install
```bash
yarn add highlightjs-glimmer
# or
npm install highlightjs-glimmer
```
## Compatibility
Requires: [highlight.js >= v11](https://github.com/highlightjs/highlight.js)
| | [Remark][1] | [Rehype][2] | [MarkdownIt][3] |
| -- | ----------- | ----------- | --------------- |
| cjs | ✅ | ✅ | ✅ |
| esm | ❌[^1] | ✅ | ✅ |
[1]: https://github.com/remarkjs/remark-highlight.js
[2]: https://github.com/rehypejs/rehype-highlight
[3]: https://github.com/markdown-it/markdown-it
[^1]: remark-highlight.js is deprecated and cjs only
## Usage
```js
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:
```html
```
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
```html
...
...
```
## with `await import(...)`
When using ES Modules in browsers with a packager
```ts
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
```html
hljs.highlightAll();
```
### ES Modules
At this time, highlight.js does not ship ES Modules to CDNs
```html
import { glimmer } from '/cdn/path/to/highlightjs-glimmer/glimmer.esm.js';
hljs.registerLanguage('glimmer', glimmer);
hljs.highlightAll();
```
## Node / cjs / `require`
```js
const hljs = require('highlight.js');
const { setup } = require('highlightjs-glimmer');
setup(hljs);
hljs.highlightAll();
```
Only Node 14 is supported
## Node ES Modules / `import`
```js
import hljs from 'highlight.js';
import { setup } from 'highlightjs-glimmer';
setup(hljs);
hljs.highlightAll();
```
With Node 14, launch with
```bash
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`