rehype-prism-diff

rehypre-prism-diff

A rehypre plugin allow not only diff language but also all language to show github flavored highlight diff block, suport both rehype-prism-plus and rehype-prism

Installation

This package is ESM only. In Node.js(version 12.20+, 14.14+,or 16.0+), install with npm:

npm install rehype-prism-diff

In Deno with esm.sh:

import RehypePrismDiff from 'https://esm.sh/rehype-prism-diff@1.1.0'

Usage

use this package as a rehype plugin.

Options

export interface Options {
  /** remove the first character which used to mark */
  remove?: boolean
  classMapping?: Partial<Record<'diff' | 'deleted' | 'inserted' | 'warn' | 'comment', string | string[]>>
}

options.remove

boolean, default false - enable remove the first character which used to mark.

options.classMapping

Record<'diff' | 'deleted' | 'inserted' | 'warn' | 'comment', string|string[]> - custom className mapping. properties:

• diff: the className which be added to code element.
• deleted\inserted\warn\comment: the className which be added to corresponding marked span.code-line element

Styling

This plugin will add class code-diff to code element and add the corresponding class for each span.code-line element according to the first character of each line by default option.

So you should add stylesheet by yourself, for example:

.code-line.diff-inserted {
  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
}

.code-line.diff-deleted {
  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
}

.code-line.diff-warn {
  background-color: rgba(104, 45, 15, 0.2); /* Set warn line (!) color */
}

.code-line.diff-comment {
  background-color: rgba(255, 255, 255, 0.2); /* Set comment line (#) color */
}

Notice: if you config classMapping option, you need customize the css file accordingly.

Related

• rehype-prism - syntax highlighting with Prism via refractor
• rehype-prism-plus - syntax highlighting with Prism via refractor with extras

Contribute

If you have any suggestion or bug, please feel free to open an issue

License

MIT © enpitsuLin