Adding expressive code integration for syntax highlighting

Installation

npx astro add astro-expressive-code

Examples

Will be taking the examples directly from expressive code website.

Example 1 - Marked lines/ranges

Basic highlight using 1, 4, 7-8 specifier.

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

Diff highlighting using diff lang="js" directive.

function thisIsJavaScript() {
  // This entire block gets highlighted as JavaScript,
  // and we can still add diff markers to it!
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}

Annotations with styles

<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Example 2 - Frames and filenames

Scripting tags automatically get a frame (e.g. for bash):

find ~ -iname "blog-file*"

It can be removed with frame="none"

find ~ -iname "blog-file*"

A window can be given a title

lsblk -h

Filenames can be inferred from comments

<div>File name comment example</div>

Or used directly with title arg

console.log('Title attribute example')

Example 3 - Highlighting individual text

Highlight given text.

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Highlight using colored markers (mark/inserted/deleted)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}