Code Blocks

Display syntax-highlighted code in your DexCode slides.

Code Blocks

DexCode renders code blocks with syntax highlighting. Use standard Markdown fenced code blocks with a language identifier.

Basic Usage

typescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Supported Languages

DexCode supports a wide range of programming languages, including:

TypeScript / JavaScript
Python
Rust
Go
Java
C / C++
Ruby
Swift
SQL
Bash / Shell
HTML / CSS
JSON / YAML / TOML

Multi-Language Code

Show code in multiple languages side by side using the Columns component. Place each language in a separate Column with its own code block, letting viewers compare implementations at a glance.

TypeScript

typescript

const result = await fetch("/api/data");
const data = await result.json();

Python

python

import requests
result = requests.get("/api/data")
data = result.json()

Go

resp, err := http.Get("/api/data")
defer resp.Body.Close()
data, _ := io.ReadAll(resp.Body)

Terminal Blocks

For shell commands, use standard bash code blocks:

bash

$ git clone git@github.com:co-r-e/dexcode.git
$ cd dexcode && npm install
$ npm run dev

Code with Explanations

Pair code with descriptive text using the Columns component. Place the code block on one side and explanation on the other for a clean layout.