Wondering what’s next for npm?Check out our public roadmap! »

    TypeScript icon, indicating that this package has built-in type declarations

    9.12.1-2 • Public • Published

    HighlightJS in TypeScript (and ES6)

    License: BSD npm version npm downloads Build Status

    This is a port of the highlight.js to a TypeScript (as well as ECMAScript 6).

    NOTE: Currently not all languages are supported. PRs are welcome.

    Usage example

    import {
      // import basic APIs
      // import preferred languages
    } from 'highlight-ts';
    // register languages
    const options: Options = {
      classPrefix: '',
      /* other options */
    // initialize highlighter
    const highlighter: Highlighter<string>
      = init(htmlRender, options);
    const source = `
    interface Point {
      x: number,
      y: number,
    function distance(a: Point, b: Point): number {
      return Math.sqrt(
        (a.x - b.x) ** 2 +
        (a.y - b.y) ** 2);
    // render source with given language mode
    const language = 'ts';
    const html = process(highlighter, source, language);
    // or highligh source using auto language detection
    const languages = ['ts', 'js', 'md'];
    const html = process(highlighter, source, languages);
    // auto detection using all known language modes
    const html = process(highlighter, source);
    // display result
    elm.innerHTML = `<pre>${html}</pre>`;

    Differences from original

    • Complete re-implementation using modern JavaScript syntax and features.
    • No module-global state and configuration excluding the language modes registry.
    • ES6 Module Syntax to compatibility with modern bundlers like Rollup which support Tree-Shaking.
    • Support renderer API to render to HTML text as well as to a DOM-nodes directly or by VirtualDOM engines.
    • Compiled mode it is another object not same as a source what get a little bit lower memory usage.
    • Replaced some utility functions by ES6 syntax extensions which is provided by tslib for ES5 target.
    • Fixed some modes to get more correct or advanced highlight.

    Renderer API

    Currently the renderer API is quite simple:

    export interface Renderer<Output> {
        text(chunk: string): Output;
        wrap(className: string, chunk: Output): Output;
        join(chunks: Output[]): Output;
    1. The text() call is using to render textual piece of source code.
    2. The wrap() call is using to wrap rendered chunk into span with specified class.
    3. The join() call is using to join several rendered chunks into single chunk.

    By example we can implement HTML renderer like this:

    import { Renderer } from 'highligh-ts';
    const htmlRender: Renderer<string> = {
        text: (chunk: string) => chunk
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;'),
        join: (chunks: string[]) => chunks.join(''),
        wrap: (className: string, chunk: string) =>
            `<span class="${className}">${chunk}</span>`

    HighlightJS API

    See the types.ts source to understand highlight mode definition syntax.

    Read the original highlightjs docs to get more help how to implement syntax highlighting modes.


    npm i highlight-ts

    DownloadsWeekly Downloads






    Unpacked Size

    972 kB

    Total Files


    Last publish


    • avatar