Writing

Code Blocks

Dev Portal 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.

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

The code block above will render as:

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

Inline Code

You can highlight inline code using either:

Regular backticks without language specification:

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

Result: console.log("Hello World")

or with the tailing curly colon syntax:

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

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:

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

Result:

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

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:

Code
 
```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(tsx)
 
import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Mounted");
  }, []);

  return <div>Hello</div>;
}

Configuration

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

zudoku.config.ts(tsx)
 
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"],
  },
};

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

Default Supported Languages

By default, Dev Portal 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(ansi)
 
colored foreground
bold text
dimmed text
underlined text
reversed text
strikethrough text
underlined + strikethrough text

Usage:

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

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