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

``typescript
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
= 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 =

${html}

;
`

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:

`typescript
export interface Renderer

{
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:

`typescript
import { Renderer } from 'highligh-ts';

const htmlRender: Renderer = {
text: (chunk: string) => chunk
.replace(/&/g, '&')
.replace(/ .replace(/>/g, '>'),
join: (chunks: string[]) => chunks.join(''),
wrap: (className: string, chunk: string) =>
${chunk}
};
``

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.