Highlight.js Async Webpack

1.0.4 verified Sat Apr 25 auth: no javascript maintenance

Wraps highlight.js language modules as async webpack chunks, enabling on-demand loading of syntax highlighting. Version 1.0.4 (latest) returns false on error. Provides `hljsBlock(dom, lang, callback)` for async highlighting. Minimal API, no peer dependencies. Only compatible with webpack due to dynamic require context. Not actively maintained; last release 5+ years ago.

Common errors

error Cannot find module 'highlight.js-async-webpack' ↓

cause Package not installed or not in node_modules.

fix

Run: npm install highlight.js-async-webpack

error TypeError: hljs.hljsBlock is not a function ↓

cause Incorrect import (e.g., named import) or using require instead of import.

fix

Use: import hljs from 'highlight.js-async-webpack' (default import)

error Error: Cannot find module './lang/xxx' ↓

cause Requested language file not available in the async chunk path.

fix

Check that the language name passed to hljsBlock matches an existing file like 'javascript' (not 'js').

Warnings

deprecated Package not updated since 2018; may not work with modern webpack (4/5) or Node.js versions. ↓

fix Consider using highlight.js with dynamic imports directly, or use highlight.js official npm package.

breaking Requires webpack and a specific async chunk naming convention; not compatible with other bundlers. ↓

fix Use only in webpack projects; for others, use highlight.js manual chunking.

gotcha The callback is mandatory; omitting it will cause the highlighting to never complete. ↓

fix Always provide a callback function even if it's a no-op.

gotcha Language files must exist at runtime; package does not include all languages by default. ↓

fix Ensure the required language files are present in the webpack build context.

Install

npm install highlight.js-async-webpack

yarn add highlight.js-async-webpack

pnpm add highlight.js-async-webpack

Imports

default

wrong

const hljs = require('highlight.js-async-webpack')

correct

import hljs from 'highlight.js-async-webpack'

ESM default import only; CommonJS require may return broken object

hljsBlock
wrong
```
hljs.hljsBlock(dom, lang)
```
correct
```
hljs.hljsBlock(dom, lang, callback)
```
Callback is required; omitted callback will break async flow

hljsBlock

wrong

import { hljsBlock } from 'highlight.js-async-webpack'

correct

import hljs from 'highlight.js-async-webpack'; hljs.hljsBlock(...)

Named export not available; must use default import

Quickstart

Demonstrates importing the package and invoking hljsBlock with a DOM element, language class, and callback.

import hljs from 'highlight.js-async-webpack';

const codeElement = document.querySelector('code.language-javascript');
if (codeElement) {
  hljs.hljsBlock(codeElement, 'javascript', () => {
    console.log('Highlighting complete');
  });
}