[d24f17c] | 1 | # lowlight
|
---|
| 2 |
|
---|
| 3 | [![Build][build-badge]][build]
|
---|
| 4 | [![Coverage][coverage-badge]][coverage]
|
---|
| 5 | [![Downloads][downloads-badge]][downloads]
|
---|
| 6 | [![Size][size-badge]][size]
|
---|
| 7 |
|
---|
| 8 | Virtual syntax highlighting for virtual DOMs and non-HTML things, with language
|
---|
| 9 | auto-detection.
|
---|
| 10 | Perfect for [React][], [VDOM][], and others.
|
---|
| 11 |
|
---|
| 12 | Lowlight is built to work with all syntaxes supported by [highlight.js][],
|
---|
| 13 | that’s [191 languages][names] (and all 94 themes).
|
---|
| 14 |
|
---|
| 15 | Want to use [Prism][] instead?
|
---|
| 16 | Try [`refractor`][refractor]!
|
---|
| 17 |
|
---|
| 18 | ## Contents
|
---|
| 19 |
|
---|
| 20 | * [Install](#install)
|
---|
| 21 | * [Use](#use)
|
---|
| 22 | * [API](#api)
|
---|
| 23 | * [`low.highlight(language, value[, options])`](#lowhighlightlanguage-value-options)
|
---|
| 24 | * [`low.highlightAuto(value[, options])`](#lowhighlightautovalue-options)
|
---|
| 25 | * [`Result`](#result)
|
---|
| 26 | * [`low.registerLanguage(name, syntax)`](#lowregisterlanguagename-syntax)
|
---|
| 27 | * [`low.registerAlias(name[, alias])`](#lowregisteraliasname-alias)
|
---|
| 28 | * [`low.listLanguages()`](#lowlistlanguages)
|
---|
| 29 | * [Browser](#browser)
|
---|
| 30 | * [Related](#related)
|
---|
| 31 | * [Projects](#projects)
|
---|
| 32 | * [License](#license)
|
---|
| 33 |
|
---|
| 34 | ## Install
|
---|
| 35 |
|
---|
| 36 | [npm][]:
|
---|
| 37 |
|
---|
| 38 | ```sh
|
---|
| 39 | npm install lowlight
|
---|
| 40 | ```
|
---|
| 41 |
|
---|
| 42 | [Usage in the browser »][browser]
|
---|
| 43 |
|
---|
| 44 | ## Use
|
---|
| 45 |
|
---|
| 46 | Highlight:
|
---|
| 47 |
|
---|
| 48 | ```js
|
---|
| 49 | var low = require('lowlight')
|
---|
| 50 | var tree = low.highlight('js', '"use strict";').value
|
---|
| 51 |
|
---|
| 52 | console.log(tree)
|
---|
| 53 | ```
|
---|
| 54 |
|
---|
| 55 | Yields:
|
---|
| 56 |
|
---|
| 57 | ```js
|
---|
| 58 | [
|
---|
| 59 | {
|
---|
| 60 | type: 'element',
|
---|
| 61 | tagName: 'span',
|
---|
| 62 | properties: {className: ['hljs-meta']},
|
---|
| 63 | children: [{type: 'text', value: '"use strict"'}]
|
---|
| 64 | },
|
---|
| 65 | {type: 'text', value: ';'}
|
---|
| 66 | ]
|
---|
| 67 | ```
|
---|
| 68 |
|
---|
| 69 | Or, serialized with [rehype-stringify][]:
|
---|
| 70 |
|
---|
| 71 | ```js
|
---|
| 72 | var unified = require('unified')
|
---|
| 73 | var rehypeStringify = require('rehype-stringify')
|
---|
| 74 |
|
---|
| 75 | var processor = unified().use(rehypeStringify)
|
---|
| 76 | var html = processor.stringify({type: 'root', children: tree}).toString()
|
---|
| 77 |
|
---|
| 78 | console.log(html)
|
---|
| 79 | ```
|
---|
| 80 |
|
---|
| 81 | Yields:
|
---|
| 82 |
|
---|
| 83 | ```html
|
---|
| 84 | <span class="hljs-meta">"use strict"</span>;
|
---|
| 85 | ```
|
---|
| 86 |
|
---|
| 87 | > **Tip**: Use [`hast-to-hyperscript`][to-hyperscript] to transform to other
|
---|
| 88 | > virtual DOMs, or DIY.
|
---|
| 89 |
|
---|
| 90 | ## API
|
---|
| 91 |
|
---|
| 92 | ### `low.highlight(language, value[, options])`
|
---|
| 93 |
|
---|
| 94 | Parse `value` (`string`) according to the [`language`][names] grammar.
|
---|
| 95 |
|
---|
| 96 | ###### `options`
|
---|
| 97 |
|
---|
| 98 | * `prefix` (`string?`, default: `'hljs-'`) — Class prefix
|
---|
| 99 |
|
---|
| 100 | ###### Returns
|
---|
| 101 |
|
---|
| 102 | [`Result`][result].
|
---|
| 103 |
|
---|
| 104 | ###### Example
|
---|
| 105 |
|
---|
| 106 | ```js
|
---|
| 107 | var low = require('lowlight')
|
---|
| 108 |
|
---|
| 109 | console.log(low.highlight('css', 'em { color: red }'))
|
---|
| 110 | ```
|
---|
| 111 |
|
---|
| 112 | Yields:
|
---|
| 113 |
|
---|
| 114 | ```js
|
---|
| 115 | {relevance: 4, language: 'css', value: [Array]}
|
---|
| 116 | ```
|
---|
| 117 |
|
---|
| 118 | ### `low.highlightAuto(value[, options])`
|
---|
| 119 |
|
---|
| 120 | Parse `value` by guessing its grammar.
|
---|
| 121 |
|
---|
| 122 | ###### `options`
|
---|
| 123 |
|
---|
| 124 | * `prefix` (`string?`, default: `'hljs-'`)
|
---|
| 125 | — Class prefix
|
---|
| 126 | * `subset` (`Array.<string>?` default: all registered languages)
|
---|
| 127 | — List of allowed languages
|
---|
| 128 |
|
---|
| 129 | ###### Returns
|
---|
| 130 |
|
---|
| 131 | [`Result`][result], with a `secondBest` if found.
|
---|
| 132 |
|
---|
| 133 | ###### Example
|
---|
| 134 |
|
---|
| 135 | ```js
|
---|
| 136 | var low = require('lowlight')
|
---|
| 137 |
|
---|
| 138 | console.log(low.highlightAuto('"hello, " + name + "!"'))
|
---|
| 139 | ```
|
---|
| 140 |
|
---|
| 141 | Yields:
|
---|
| 142 |
|
---|
| 143 | ```js
|
---|
| 144 | {
|
---|
| 145 | relevance: 3,
|
---|
| 146 | language: 'applescript',
|
---|
| 147 | value: [Array],
|
---|
| 148 | secondBest: {relevance: 3, language: 'basic', value: [Array]}
|
---|
| 149 | }
|
---|
| 150 | ```
|
---|
| 151 |
|
---|
| 152 | ### `Result`
|
---|
| 153 |
|
---|
| 154 | `Result` is a highlighting result object.
|
---|
| 155 |
|
---|
| 156 | ###### Properties
|
---|
| 157 |
|
---|
| 158 | * `relevance` (`number`)
|
---|
| 159 | — How sure **low** is that the given code is in the found language
|
---|
| 160 | * `language` (`string`)
|
---|
| 161 | — The detected `language`
|
---|
| 162 | * `value` ([`Array.<Node>`][hast-node])
|
---|
| 163 | — Virtual nodes representing the highlighted given code
|
---|
| 164 | * `secondBest` ([`Result?`][result])
|
---|
| 165 | — Result of the second-best (based on `relevance`) match.
|
---|
| 166 | Only set by `highlightAuto`, but can still be `null`.
|
---|
| 167 |
|
---|
| 168 | ### `low.registerLanguage(name, syntax)`
|
---|
| 169 |
|
---|
| 170 | Register a [syntax][] as `name` (`string`).
|
---|
| 171 | Useful in the browser or with custom grammars.
|
---|
| 172 |
|
---|
| 173 | ###### Example
|
---|
| 174 |
|
---|
| 175 | ```js
|
---|
| 176 | var low = require('lowlight/lib/core')
|
---|
| 177 | var xml = require('highlight.js/lib/languages/xml')
|
---|
| 178 |
|
---|
| 179 | low.registerLanguage('xml', xml)
|
---|
| 180 |
|
---|
| 181 | console.log(low.highlight('html', '<em>Emphasis</em>'))
|
---|
| 182 | ```
|
---|
| 183 |
|
---|
| 184 | Yields:
|
---|
| 185 |
|
---|
| 186 | ```js
|
---|
| 187 | {relevance: 2, language: 'html', value: [Array]}
|
---|
| 188 | ```
|
---|
| 189 |
|
---|
| 190 | ### `low.registerAlias(name[, alias])`
|
---|
| 191 |
|
---|
| 192 | Register a new `alias` for the `name` language.
|
---|
| 193 |
|
---|
| 194 | ###### Signatures
|
---|
| 195 |
|
---|
| 196 | * `registerAlias(name, alias|list)`
|
---|
| 197 | * `registerAlias(aliases)`
|
---|
| 198 |
|
---|
| 199 | ###### Parameters
|
---|
| 200 |
|
---|
| 201 | * `name` (`string`) — [Name][names] of a registered language
|
---|
| 202 | * `alias` (`string`) — New alias for the registered language
|
---|
| 203 | * `list` (`Array.<alias>`) — List of aliases
|
---|
| 204 | * `aliases` (`Object.<alias|list>`) — Map where each key is a `name` and each
|
---|
| 205 | value an `alias` or a `list`
|
---|
| 206 |
|
---|
| 207 | ###### Example
|
---|
| 208 |
|
---|
| 209 | ```js
|
---|
| 210 | var low = require('lowlight/lib/core')
|
---|
| 211 | var md = require('highlight.js/lib/languages/markdown')
|
---|
| 212 |
|
---|
| 213 | low.registerLanguage('markdown', md)
|
---|
| 214 |
|
---|
| 215 | // low.highlight('mdown', '<em>Emphasis</em>')
|
---|
| 216 | // ^ would throw: Error: Unknown language: `mdown` is not registered
|
---|
| 217 |
|
---|
| 218 | low.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
|
---|
| 219 | low.highlight('mdown', '<em>Emphasis</em>')
|
---|
| 220 | // ^ Works!
|
---|
| 221 | ```
|
---|
| 222 |
|
---|
| 223 | ### `low.listLanguages()`
|
---|
| 224 |
|
---|
| 225 | List all registered languages.
|
---|
| 226 |
|
---|
| 227 | ###### Returns
|
---|
| 228 |
|
---|
| 229 | `Array.<string>`.
|
---|
| 230 |
|
---|
| 231 | ###### Example
|
---|
| 232 |
|
---|
| 233 | ```js
|
---|
| 234 | var low = require('lowlight/lib/core')
|
---|
| 235 | var md = require('highlight.js/lib/languages/markdown')
|
---|
| 236 |
|
---|
| 237 | console.log(low.listLanguages()) // => []
|
---|
| 238 |
|
---|
| 239 | low.registerLanguage('markdown', md)
|
---|
| 240 |
|
---|
| 241 | console.log(low.listLanguages()) // => ['markdown']
|
---|
| 242 | ```
|
---|
| 243 |
|
---|
| 244 | ## Browser
|
---|
| 245 |
|
---|
| 246 | It is not suggested to use the pre-built files or requiring `lowlight` in the
|
---|
| 247 | browser as that would include 916kB (260kB GZipped) of code.
|
---|
| 248 |
|
---|
| 249 | Instead, require `lowlight/lib/core`, and include only the used highlighters.
|
---|
| 250 | For example:
|
---|
| 251 |
|
---|
| 252 | ```js
|
---|
| 253 | var low = require('lowlight/lib/core')
|
---|
| 254 | var js = require('highlight.js/lib/languages/javascript')
|
---|
| 255 |
|
---|
| 256 | low.registerLanguage('javascript', js)
|
---|
| 257 |
|
---|
| 258 | low.highlight('js', '"use strict";')
|
---|
| 259 | // See `Usage` for the results.
|
---|
| 260 | ```
|
---|
| 261 |
|
---|
| 262 | …when using [browserify][] and minifying with [tinyify][] this results in 24kB
|
---|
| 263 | of code (9kB with GZip).
|
---|
| 264 |
|
---|
| 265 | ## Related
|
---|
| 266 |
|
---|
| 267 | * [`refractor`][refractor] — Same, but based on [Prism][]
|
---|
| 268 |
|
---|
| 269 | ## Projects
|
---|
| 270 |
|
---|
| 271 | * [`emphasize`](https://github.com/wooorm/emphasize)
|
---|
| 272 | — Syntax highlighting in ANSI, for the terminal
|
---|
| 273 | * [`react-lowlight`](https://github.com/rexxars/react-lowlight)
|
---|
| 274 | — Syntax highlighter for [React][]
|
---|
| 275 | * [`react-syntax-highlighter`](https://github.com/conorhastings/react-syntax-highlighter)
|
---|
| 276 | — [React][] component for syntax highlighting
|
---|
| 277 | * [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight)
|
---|
| 278 | — Syntax highlighting in [**rehype**](https://github.com/rehypejs/rehype)
|
---|
| 279 | * [`remark-highlight.js`](https://github.com/ben-eb/remark-highlight.js)
|
---|
| 280 | — Syntax highlighting in [**remark**](https://github.com/remarkjs/remark)
|
---|
| 281 | * [`jstransformer-lowlight`](https://github.com/ai/jstransformer-lowlight)
|
---|
| 282 | — Syntax highlighting for [JSTransformers](https://github.com/jstransformers)
|
---|
| 283 | and [Pug](https://pugjs.org/language/filters.html)
|
---|
| 284 |
|
---|
| 285 | ## License
|
---|
| 286 |
|
---|
| 287 | [MIT][license] © [Titus Wormer][author]
|
---|
| 288 |
|
---|
| 289 | <!-- Definitions -->
|
---|
| 290 |
|
---|
| 291 | [build-badge]: https://github.com/wooorm/lowlight/workflows/main/badge.svg
|
---|
| 292 |
|
---|
| 293 | [build]: https://github.com/wooorm/lowlight/actions
|
---|
| 294 |
|
---|
| 295 | [coverage-badge]: https://img.shields.io/codecov/c/github/wooorm/lowlight.svg
|
---|
| 296 |
|
---|
| 297 | [coverage]: https://codecov.io/github/wooorm/lowlight
|
---|
| 298 |
|
---|
| 299 | [downloads-badge]: https://img.shields.io/npm/dm/lowlight.svg
|
---|
| 300 |
|
---|
| 301 | [downloads]: https://www.npmjs.com/package/lowlight
|
---|
| 302 |
|
---|
| 303 | [size-badge]: https://img.shields.io/bundlephobia/minzip/lowlight.svg
|
---|
| 304 |
|
---|
| 305 | [size]: https://bundlephobia.com/result?p=lowlight
|
---|
| 306 |
|
---|
| 307 | [npm]: https://docs.npmjs.com/cli/install
|
---|
| 308 |
|
---|
| 309 | [license]: license
|
---|
| 310 |
|
---|
| 311 | [author]: https://wooorm.com
|
---|
| 312 |
|
---|
| 313 | [rehype-stringify]: https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify
|
---|
| 314 |
|
---|
| 315 | [hast-node]: https://github.com/syntax-tree/hast#ast
|
---|
| 316 |
|
---|
| 317 | [highlight.js]: https://github.com/highlightjs/highlight.js
|
---|
| 318 |
|
---|
| 319 | [syntax]: https://github.com/highlightjs/highlight.js/blob/main/docs/language-guide.rst
|
---|
| 320 |
|
---|
| 321 | [names]: https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
|
---|
| 322 |
|
---|
| 323 | [react]: https://facebook.github.io/react/
|
---|
| 324 |
|
---|
| 325 | [vdom]: https://github.com/Matt-Esch/virtual-dom
|
---|
| 326 |
|
---|
| 327 | [to-hyperscript]: https://github.com/syntax-tree/hast-to-hyperscript
|
---|
| 328 |
|
---|
| 329 | [browser]: #browser
|
---|
| 330 |
|
---|
| 331 | [result]: #result
|
---|
| 332 |
|
---|
| 333 | [prism]: https://github.com/PrismJS/prism
|
---|
| 334 |
|
---|
| 335 | [refractor]: https://github.com/wooorm/refractor
|
---|
| 336 |
|
---|
| 337 | [browserify]: https://github.com/browserify/browserify
|
---|
| 338 |
|
---|
| 339 | [tinyify]: https://github.com/browserify/tinyify
|
---|