Mason James

← PluginsAvailable

Syntax Highlighter

Code blocks that look right in light and dark mode.

A code snippet block for EmDash with server-rendered Shiki highlighting, paired light and dark themes, line numbers, highlighted lines and a copy button.

View on npmSource on GitHubHow to install ↓

  • Server-side highlighting

    Shiki runs at render time, with no client library.

  • Light and dark themes

    Everforest by default, switching with the reader's mode.

  • Line numbers and ranges

    Highlight the lines that matter.

  • Copy button

    One click to copy the snippet.

Syntax Highlighter adds a code snippet block to the EmDash editor. Highlighting happens on the server with Shiki, so readers download colored HTML instead of a highlighting library, and each snippet follows the reader's light or dark mode.

Readable by default

Line numbers and a copy button are on by default, and editors can switch them per snippet or highlight the lines that matter. Languages outside your allowed list fall back to plain text instead of breaking.

Install

pnpm add @masonjames/emdash-syntax-highlighter

// astro.config.mjs
import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { syntaxHighlighterPlugin } from "@masonjames/emdash-syntax-highlighter";

export default defineConfig({
  integrations: [
    emdash({ plugins: [syntaxHighlighterPlugin()] }),
  ],
});

Questions

Which languages are supported?

Seventeen by default, including TypeScript, Astro, Python, Go, Rust, SQL and Bash. You can change the list in settings.

More EmDash plugins

All plugins →