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

​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:

• Line highlighting
• Word highlighting
• Line numbers: showLineNumbers
• Title: title

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:

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.

---