https://github.com/posthtml/posthtml-prism

PostHTML plugin for code syntax highlighting with Prism.
https://github.com/posthtml/posthtml-prism

code-highlight highlight posthtml-plugin prismjs syntax-highlighting

Last synced: 1 day ago
JSON representation

PostHTML plugin for code syntax highlighting with Prism.

• Host: GitHub
• URL: https://github.com/posthtml/posthtml-prism
• Owner: posthtml
• License: mit
• Created: 2020-03-20T14:48:52.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-30T11:02:52.000Z (5 months ago)
• Last Synced: 2024-10-29T21:06:06.982Z (3 months ago)
• Topics: code-highlight, highlight, posthtml-plugin, prismjs, syntax-highlighting
• Language: JavaScript
• Homepage:
• Size: 1.82 MB
• Stars: 11
• Watchers: 4
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
Prism Syntax Highlighting


  Compile-time syntax highlighting for code blocks with [Prism](https://prismjs.com/)

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

### inline 

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](https://github.com/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));

    });

  



```


### Skip highlighting on a node

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