Learn Shiki Rehype Pretty Code

Learn Shiki & Rehype-Pretty-Code to present code blocks with accurate, feature-rich syntax highlighting in blogs, MD/MDX documentation, and static sites built on unified/remark/rehype (Next.js, Astro, SvelteKit, VitePress): pre-requisites & setup environment, history & why this combination is needed, core concepts & architecture, setup & hello world, basic options, languages & themes, meta strings & caption, line & word highlighting, diff & code annotations, inline code, Shiki transformers, content framework integration, custom langs & themes, performance & bundle optimization, security & output sanitization, multiple themes dark/light, copy button & UI interactions, custom HAST & advanced rehype plugins, Shiki core & highlighter API, performance & troubleshooting, the latest Shiki 4 features, production-ready configuration, and alternative ecosystem & final reflection with 23 episodes in total.

⌘ + /

Sponsor this project

Back to Series

0 views

Read

Learn Shiki Rehype Pretty Code - Pre-Requisites Skills & Setup Environment

Before touching Shiki and rehype-pretty-code, you need to master Node.js, ESM basics, Markdown/MDX, and the AST concept. In this episode you also set up a content project, install shiki and rehype-pretty-code, then verify the pipeline for the first time.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - History, Background & Why This Combination Is Needed

This episode traces the evolution of syntax highlighting from simple regex to TextMate grammar, the birth of Shiki in 2018, and rehype-pretty-code in 2022. You will understand the problems both solve and why this combination excels.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Core Concepts & Main Architecture

This episode dissects the main architecture of the Shiki and rehype-pretty-code combination. You will see the tokenization flow from TextMate grammar through Oniguruma WASM, node transformation in the unified pipeline, and the role of each package in producing HTML.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Setup & Hello World

You will install shiki and rehype-pretty-code, then assemble a minimal unified pipeline that turns Markdown into HTML with syntax highlighting. At the end of the episode there is a first code block ready to use in your project.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Basic Options of rehype-pretty-code

This episode dissects the basic options of rehype-pretty-code: theme, keepBackground, defaultLang, grid, and bypassInlineCode. You will also understand the HTML output structure of figure, pre, and code along with the data attributes that become the anchors for CSS styling.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Languages & Themes

You will learn to choose a language via the fenced code block meta and defaultLang, get to know the language catalog from @shikijs/langs, and choose built-in themes like github, one-dark, nord, and vitesse. There's also a way to manage the background via the keepBackground option.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Meta Strings & Caption

The meta string on a fenced code block is a rich configuration language: title, caption, showLineNumbers, lines, and diff. This episode dissects the meta string parsing format and its impact on the markup generated by rehype-pretty-code.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Line Highlighting & Word Highlight

You will learn line highlighting with ranges and lists of lines, CSS styling based on data-highlighted-line, then word and character highlighting to mark specific tokens or text via data-highlighted-chars.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Diff & Code Annotations

You will learn to create diff blocks with the diff meta and add-remove markers, mark important lines as annotations, and combine diff, line highlighting, and captions in one block to present code changes clearly.

August 10, 2026

AI Agent

Read

Learn Shiki Rehype Pretty Code - Inline Code Highlighting

You will enable highlighting for inline code via the bypassInlineCode option, write a language meta inside inline code, then match its color semantics with the surrounding code blocks so the article looks consistent.

August 10, 2026

AI Agent