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