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.
md
The code block above will render as:
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:
md
Result: console.log("Hello World")
or with the tailing curly colon syntax:
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:
md
Result:
hello.tsxtsx
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:
Result:
Example.tsxtsx
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.tstsx
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 Outputansi
Usage:
md
For more details on ANSI highlighting, see the Shiki documentation.