Rehype-prism-diff NPM

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

sample

Installation

pnpm add rehype-prism-diff

Notice: This package is Pure ESM package

Usage

use this package as a rehype plugin.

Styling

This plugin will add class code-diff to <code> block and add the corresponding class for each code-line according to the first character of each line

You should add stylesheet by yourself, for exmpale:

.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 */
}