PostHTML code syntax highlighting with Prism
npm install posthtml-prismhtml
const foo = 'bar'
console.log(foo)
`
After:
`html
const foo = 'bar'
console.log(foo)
`
Install
`
$ npm i posthtml posthtml-prism
`
Usage
`js
const fs = require('fs')
const posthtml = require('posthtml')
const highlight = require('posthtml-prism')
const source = fs.readFileSync('./before.html')
posthtml([
highlight({ inline: true })
])
.process(source)
.then(result => fs.writeFileSync('./after.html', result.html))
`
Options
$3
Type: boolean\
Default: false
By default, only tags wrapped in tags are highlighted.
Pass in inline: true to highlight all code tags.
Styling
You will also need to include a Prism theme stylesheet in your HTML.
See PrismJS/prism-themes for all available themes.
Languages
By default, Prism loads the following languages: markup, css, clike, and javascript.
You can specify the language to be used for highlighting your code, by adding a language- or lang- class to the tag:
`html
$app->post('framework/{id}', function($framework) {
$this->dispatch(new Energy($framework));
});
`
$3
You can skip highlighting on a node in two ways:
1. add a prism-ignore attribute on the node:
`html
...
`
2. or, add a prism-ignore class:
`html
...
`
In both cases, the prism-ignore` attribute/class will be removed and highlighting will be skipped.
[npm]: https://www.npmjs.com/package/posthtml-prism
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-prism.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-prism&author=&from=&to=
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-prism.svg?maxAge=2592000
[github-ci]: https://github.com/posthtml/posthtml-prism/actions
[github-ci-shield]: https://github.com/posthtml/posthtml-prism/actions/workflows/nodejs.yml/badge.svg
[license]: ./license
[license-shield]: https://img.shields.io/npm/l/posthtml-prism.svg