rehype-highlight-lines

Published as @freesewing/rehype-highlight-lines, this package provides a Rehype plugin to format highlighted and struck-out lines in code blocks.

Installation

Shell prompt
npm install @freesewing/rehype-highlight-lines

Usage

In NodeJS:

Javascript
import rehypeHighlightLines from @freesewing/rehype-highlight-lines

...
   rehypePlugins: [
     [
       rehypeHighlightLines,
       {
         highlightClass: ['highlight-lines', 'border-l-4'],
         strikeoutClass: [
           'strikeout-lines',
           'bg-orange-300',
           'bg-opacity-5',
           'border-l-4',
           'opacity-80',
           'line-through',
           'decoration-orange-500',
         ],
       },
     ],
   ],

Example

Javascript
// These 3 lines will be highlighted:


const a = 1
const b = 2
const c = 3


const d = 4
// These 2 lines will be struck out:


const e = 5
const f = 6

Configuration

PropertyTypeDefaultDescription
commentTagString’span’Tag that identifies a comment.
commentClassString’hljs-comment’CSS class that identifies a comment.
openingCommentHighlightString’highlight-start’Comment text to start formatting lines as highlighted.
closingCommentHighlightString’highlight-end’Comment text to stop formatting lines as highlighted.
openingCommentStrikeoutString’strikeout-start’Comment text to start formatting lines as struck-out.
closingCommentStrikeoutString’strikeout-end’Comment text to stop formatting lines as struck-out.
highlightTagString’section’Tag to apply to the block of highlighted or struck-out lines.
highlightClassArrayString’highlight-lines’
strikeoutClassArrayString’strikeout-lines’
swallowBooleantrueRemove extra linebreaks before the start of highlighted/struck-out lines.
react-componentsrehype-jargon