Syntax Highlighting

tinydot supports server-side syntax highlighting for code blocks using Shiki.

How it works

Wrap code in fenced code blocks with a language identifier:

```javascript
const greeting = "hello world";
console.log(greeting);
```

This renders with full syntax colors, a language label, and a copy button.

Supported languages

javascript, typescript, python, bash, json, css, html, sql, go, rust, ruby, yaml, xml, c, cpp, java, swift, php, kotlin, jsx, tsx

Features

• dual theme: automatically switches between light and dark
• copy button: appears on hover, copies code to clipboard
• language label: shown in top-right corner
• content blocks: embedded code files are also highlighted
• enabled by default on all sites

Disable

to turn off syntax highlighting, add to your index.md frontmatter:

---
content:
  syntax_highlighting: false
---

code blocks will render as plain monospace text without colors.

Examples

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

#!/bin/bash
for file in *.md; do
  echo "Processing $file"
  wc -l "$file"
done

SELECT users.name, COUNT(posts.id) AS post_count
FROM users
LEFT JOIN posts ON posts.user_id = users.id
WHERE users.created_at > '2025-01-01'
GROUP BY users.id
ORDER BY post_count DESC
LIMIT 10;

See the code-examples folder for more language samples.