highlight-ts

HighlightJS in TypeScript (and ES6)

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 {
  Options,
  Highlighter,

  // import basic APIs
  registerLanguages,
  htmlRender,
  init,
  process,
  
  // import preferred languages
  CPlusPlus,
  TypeScript,
  JavaScript,
  Python,
  Lua,
  Markdown
} from 'highlight-ts';

// register languages
registerLanguages(
  CPlusPlus,
  TypeScript,
  JavaScript,
  Python,
  Lua,
  Markdown
);

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;
}

• The text() call is using to render textual piece of source code.
• The wrap() call is using to wrap rendered chunk into span with specified class.
• 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.