The EmDash alternative to SyntaxHighlighter Evolved

Highlighted code, rendered on the server.

320 words·2min read

Runs the code blocks EmDash already stores through Shiki at render time, so the page ships coloured HTML with no client JavaScript and no runtime theme switching. Nothing is rewritten on save - change the theme and every existing post picks it up on the next render. Ships CodeBlock.astro, auto-wired into PortableText.

npm install @plugdash/codeblock

alphaGitHub

import { getEmDashCollection } from "emdash"

export async function latestPosts(limit = 5) {
  const { entries } = await getEmDashCollection("posts")
  return entries
    .filter((p) => p.data.status === "published")
    .slice(0, limit)
}

def reading_time(words: int, wpm: int = 238) -> int:
    return max(1, round(words / wpm))

no grammar for this one, so it falls back to plaintext

This is the default. No configuration.

Setup

Install and register

npm install @plugdash/codeblock

import { codeblockPlugin } from "@plugdash/codeblock"
// in emdash plugins array:
codeblockPlugin({ theme: "github-dark", lineNumbers: true })

Add to your layout

import CodeBlock from "@plugdash/codeblock/CodeBlock.astro"

<CodeBlock code={source} language="typescript" />

After this, every existing code block in your posts renders highlighted - no editor changes, no migration. Auto-wired into PortableText, so there's nothing else to add unless you want direct control outside Portable Text.

It looks right. But it's yours to change.

Props

prop	type	default	description
`code`	`string`		Source to highlight - required to render
`language`	`string`		Language name. Unknown ones render as plaintext.
`filename`	`string`		Shown in the header bar
`theme`	`string`	`"github-dark"`	Shiki theme name
`lightTheme`	`string`		Second theme for light mode
`lineNumbers`	`boolean`	`false`	Show the line number gutter
`class`	`string`		Additional CSS class
`node`	`object`		Block data from PortableText auto-wiring

CSS custom properties

token	description
`--plugdash-codeblock-radius`	Border radius (default 6px)
`--plugdash-codeblock-padding`	Padding around the code (default 1rem)
`--plugdash-codeblock-size`	Font size (default 0.875rem)
`--plugdash-codeblock-line-height`	Line height (default 1.6)
`--plugdash-codeblock-font`	Font family (default monospace stack)
`--plugdash-codeblock-header-padding`	Header bar padding (default 0.5rem 1rem)
`--plugdash-codeblock-header-bg`	Header bar background (default #1a1a1a)
`--plugdash-codeblock-header-color`	Header bar text (default #9ca3af)
`--plugdash-codeblock-gutter-width`	Line number column width (default 2rem)
`--plugdash-codeblock-gutter-color`	Line number colour (default #6b7280)

Components are intentionally simple. Copy src/CodeBlock.astrointo your theme and modify freely - no upstream coupling.

Pairs well with

callouts and code blocks are the two blocks every technical writer reaches for.

callout

beta

The block every technical writer reaches for that almost no theme ships.

npm install @plugdash/callout

tocgen

beta

Long posts deserve navigation. Your readers will find what they came for.

npm install @plugdash/tocgen