Package Exports

posthtml-prism
posthtml-prism/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (posthtml-prism) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Prism Syntax Highlighting

Compile-time syntax highlighting for code blocks with Prism

Introduction

Before:

<pre><code class="language-javascript">
  const foo = 'bar'
  console.log(foo)
</code></pre>

After:

<pre><code class="language-javascript">
  <span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'bar'</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span>
</code></pre>

Install

$ npm i posthtml posthtml-prism

Usage

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

inline

Type: boolean
Default: false

By default, only <code> tags wrapped in <pre> 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 <code> tag:

<pre>
  <code class="language-php">
    $app->post('framework/{id}', function($framework) {        
      $this->dispatch(new Energy($framework));
    });
  </code>
</pre>

Skip highlighting on a node

You can skip highlighting on a node in two ways:

add a prism-ignore attribute on the node:

<pre>
  <code prism-ignore>...</code>
</pre>

or, add a prism-ignore class:

<pre>
  <code class="prism-ignore">...</code>
</pre>

In both cases, the prism-ignore attribute/class will be removed and highlighting will be skipped.