Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/posthtml/posthtml-highlight
:art: Syntax Highlighting for PostHTML
https://github.com/posthtml/posthtml-highlight
highlight highlightjs posthtml posthtml-plugin syntax-highlighter syntax-highlighting
Last synced: 3 months ago
JSON representation
:art: Syntax Highlighting for PostHTML
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-highlight
- Owner: posthtml
- License: wtfpl
- Created: 2018-03-28T01:44:10.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T23:06:56.000Z (almost 2 years ago)
- Last Synced: 2024-05-19T05:27:22.030Z (7 months ago)
- Topics: highlight, highlightjs, posthtml, posthtml-plugin, syntax-highlighter, syntax-highlighting
- Language: TypeScript
- Homepage:
- Size: 1.27 MB
- Stars: 9
- Watchers: 4
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PostHTML Highlight Plugin 
[![Version][npm-version-shield]][npm]
[![License][wtfpl-shield]][wtfpl]
[![TypeScript][typescript-shield]][typescript]
[![Build Status][build-status-shield]][build-status]
[![Coverage][codecov-shield]][codecov]
[![Downloads][npm-stats-shield]][npm-stats]
[![Chat][gitter-shield]][gitter]
Compile-time syntax highlighting for code blocks via [highlight.js][]
Before:
```html
const foo = 'foo'
console.log(foo)
```
After:
```html
const foo = 'foo'
console.log(foo)
```
## Install
```
$ yarn add -D posthtml posthtml-highlight
```
_or_
```
$ npm i posthtml posthtml-highlight
```
If using TypeScript, additionally install `@types/highlight.js`
## Usage
```js
const fs = require('fs')
const posthtml = require('posthtml')
const highlight = require('posthtml-highlight')
const source = fs.readFileSync('./before.html')
posthtml([
highlight(
/* optional */ {
/**
* By default, only code tags wrapped in pre tags are highlighted (i.e.
*
* Set `inline: true` to highlight all code tags
*/
inline: true,
/**
* You may also pass any highlight.js options (http://highlightjs.readthedocs.io/en/latest/api.html#configure-options)
*/
useBR: true,
}
),
])
.process(source)
.then((result) => fs.writeFileSync('./after.html', result.html))
```
### Styling
You will also need to include a highlight.js stylesheet
View the available color schemes [here](https://highlightjs.org/static/demo/), then
a) include via a [CDN](https://cdnjs.com/libraries/highlight.js)
b) install via npm (`yarn add -D highlight.js`, `./node_modules/highlight.js/styles/*`)
c) download via the [highlight.js repo](https://github.com/isagalaev/highlight.js/tree/master/src/styles)
### Specifying a language
Specifying a language as per [highlight.js's usage docs][] is supported, with the caveat that you must use the `lang-*` or `language-*` prefix
### Skip highlighting on a node
Add the `nohighlight` class as per [highlight.js's usage docs][]
[highlight.js]: https://highlightjs.org/
[highlight.js's usage docs]: https://highlightjs.org/usage/
[npm]: https://www.npmjs.com/package/posthtml-highlight
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-highlight.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-highlight&author=&from=&to=
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-highlight.svg?maxAge=2592000
[typescript]: https://www.typescriptlang.org/
[typescript-shield]: https://img.shields.io/badge/definitions-TypeScript-blue.svg
[build-status]: https://github.com/posthtml/posthtml-highlight/actions/workflows/nodejs.yml
[build-status-shield]: https://img.shields.io/github/workflow/status/posthtml/posthtml-highlight/Node%20CI/master
[codecov]: https://codecov.io/gh/posthtml/posthtml-highlight
[codecov-shield]: https://img.shields.io/codecov/c/github/posthtml/posthtml-highlight.svg
[gitter]: https://gitter.im/posthtml/posthtml
[gitter-shield]: https://badges.gitter.im/posthtml/posthtml.svg
[wtfpl]: ./LICENSE.md
[wtfpl-shield]: https://img.shields.io/npm/l/posthtml-highlight.svg