Welcome to Zudoku preview! Open a GitHub issue if you have feature requests or find any issues.
Markdown

Code Blocks

Zudoku supports code blocks in Markdown using the Shiki syntax highlighting library.

Syntax Highlighting

Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out this reference for the specifications of MDX.

```js console.log("Every repo must come with a mascot."); ```
md

The code block above will render as:

console.log("Every repo must come with a mascot.");
js

You can also use the SyntaxHighlight component to render code blocks in TypeScript directly.

Inline Code

You can highlight inline code using either:

Regular backticks without language specification:

`console.log("Hello World")`
md

Result: console.log("Hello World")

or with the tailing curly colon syntax:

`console.log("Hello World"){:js}`
md

Result: console.log("Hello World")

For more details, see the Shiki Rehype documentation.

You can add a title to code blocks by adding a title attribute after the backticks:

```tsx title="hello.tsx" console.log("Hello, World!"); ```
md

Result:

hello.tsx
console.log("Hello, World!");
tsx

For a complete list of supported languages and their aliases, see the Shiki Languages documentation.

Advanced Syntax Highlighting

There are multiple ways to enhance syntax highlighting:

Example:

```tsx {4-6} /react/ title="Example.tsx" showLineNumbers import { useEffect } from "react"; function Example() { useEffect(() => { console.log("Mounted"); }, []); return <div>Hello</div>; } ```

Result:

Example.tsx
import { useEffect } from "react"; function Example() { useEffect(() => { console.log("Mounted"); }, []); return <div>Hello</div>; }
tsx

Configuration

You can configure syntax highlighting in your zudoku.config.tsx:

Changes to the syntax highlighting configuration require a restart of Zudoku to take effect.

zudoku.config.ts
import { defaultLanguages, type ZudokuConfig } from "zudoku"; const config: ZudokuConfig = { // ... syntaxHighlighting: { themes: { light: "vitesse-light", dark: "vitesse-dark", }, // Extend default languages if needed languages: [...defaultLanguages, "powershell"], }, };
tsx

For a complete list of available themes and languages, see the list of Shiki themes and Shiki languages.

Default Supported Languages

By default, Zudoku supports the following languages for syntax highlighting:

  • HTML/CSS - html, css
  • JavaScript/TypeScript - javascript, js, jsx, typescript, ts, tsx
  • Markdown - markdown, md
  • JSON/YAML/TOML - json, yaml, toml
  • Shell - bash, sh, shell
  • Python - python
  • Rust - rust
  • SQL - sql
  • PHP - php
  • Ruby - ruby, rb
  • Swift - swift
  • Kotlin - kotlin
  • Java - java
  • C# - csharp, cs
  • Go - go
  • Objective-C - objectivec, objc

ANSI Code Blocks

You can use the ansi language to highlight terminal outputs with ANSI escape sequences. This is useful for displaying colored terminal output, styled text, and other terminal-specific formatting.

Terminal Output
colored foreground bold text dimmed text underlined text reversed text strikethrough text underlined + strikethrough text
ansi

Usage:

```ansi title="Terminal Output" colored foreground bold text dimmed text underlined text reversed text strikethrough text underlined + strikethrough text ```
md

For more details on ANSI highlighting, see the Shiki documentation.