Prism Syntax Highlighting

Compile-time syntax highlighting for code blocks with Prism

[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]

Introduction

Before:

``

html



  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

Introduction

html



  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:

\
Default:

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