Syntax Highlighting Showcase

Updated 2026-03-04
#development #showcase #code #syntax-highlighting

Vaultex ships with over 70 syntax highlighting themes via highlight.js, all bundled locally. The active theme is set in themes/vaultex/_config.yml under highlight. This post shows off code blocks across a variety of languages.

JavaScript

Modern JavaScript — async/await, destructuring, optional chaining:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function fetchPosts(url, options = {}) {
  const { limit = 10, offset = 0 } = options;

  const response = await fetch(`${url}?limit=${limit}&offset=${offset}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }

  const { data, meta } = await response.json();
  return {
    posts: data.map(post => ({
      id: post.id,
      title: post.title,
      slug: post.slug ?? post.title.toLowerCase().replace(/\s+/g, '-'),
      tags: post.tags ?? [],
    })),
    total: meta?.total ?? 0,
  };
}

TypeScript

TypeScript with generics and utility types:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
type ApiResponse<T> = {
  data: T;
  error: string | null;
  status: number;
};

interface Post {
  id: number;
  title: string;
  content: string;
  publishedAt: Date | null;
  tags: string[];
}

async function getPost(id: number): Promise<ApiResponse<Post>> {
  try {
    const res = await fetch(`/api/posts/${id}`);
    const data: Post = await res.json();
    return { data, error: null, status: res.status };
  } catch (err) {
    return { data: null as unknown as Post, error: String(err), status: 500 };
  }
}

Python

A simple dataclass and type-annotated function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
from dataclasses import dataclass, field
from datetime import datetime
from typing import Optional


@dataclass
class Post:
    title: str
    slug: str
    content: str
    published_at: Optional[datetime] = None
    tags: list[str] = field(default_factory=list)

    def is_published(self) -> bool:
        return self.published_at is not None and self.published_at <= datetime.now()

    def word_count(self) -> int:
        return len(self.content.split())

    def __repr__(self) -> str:
        status = "published" if self.is_published() else "draft"
        return f"Post({self.slug!r}, {status}, {self.word_count()} words)"

Bash / Shell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#!/usr/bin/env bash
set -euo pipefail

SITE_DIR="${1:-.}"
OUTPUT_DIR="$SITE_DIR/public"

echo "Building site in $SITE_DIR..."

# Clean previous build
if [[ -d "$OUTPUT_DIR" ]]; then
  rm -rf "$OUTPUT_DIR"
  echo "Cleaned $OUTPUT_DIR"
fi

# Generate
cd "$SITE_DIR"
npx hexo generate

echo "Build complete. $(find "$OUTPUT_DIR" -type f | wc -l) files generated."

CSS

Custom properties and modern layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Theme tokens */
:root {
  --color-bg: #1e1e2e;
  --color-surface: #252535;
  --color-border: #3a3a5c;
  --color-text: #cdd6f4;
  --color-accent: #89b4fa;
  --color-accent-muted: rgba(137, 180, 250, 0.15);

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Source Code Pro', 'Cascadia Code', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --transition-fast: 150ms ease;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width, 240px);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  transition: width var(--transition-fast);
}

.sidebar:is([aria-hidden="true"]) {
  width: 0;
}

SQL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
SELECT
  p.id,
  p.title,
  p.slug,
  p.published_at,
  COUNT(DISTINCT t.id)   AS tag_count,
  COUNT(DISTINCT c.id)   AS comment_count,
  AVG(v.duration_seconds) AS avg_read_time
FROM posts p
LEFT JOIN post_tags pt  ON pt.post_id = p.id
LEFT JOIN tags t        ON t.id = pt.tag_id
LEFT JOIN comments c    ON c.post_id = p.id AND c.approved = TRUE
LEFT JOIN visits v      ON v.post_id = p.id
WHERE p.published_at < NOW()
  AND p.deleted_at IS NULL
GROUP BY p.id, p.title, p.slug, p.published_at
HAVING COUNT(DISTINCT t.id) > 0
ORDER BY p.published_at DESC
LIMIT 20;

YAML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Vaultex theme config
vault_name: vaultex

nav_items:
  - label: Home
    path: /
    icon: home
  - label: Archive
    path: /archives/
    icon: archive

sidebar_right:
  toc: true
  toc_depth: 3
  show_related: true
  show_tags_panel: true

highlight: obsidian

JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "hexo-site",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "server": "hexo server",
    "deploy": "hexo deploy"
  },
  "dependencies": {
    "hexo": "^8.0.0",
    "hexo-generator-feed": "^4.0.0",
    "hexo-generator-search": "^2.4.3",
    "hexo-generator-sitemap": "^3.0.1",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^7.0.0"
  }
}

Go

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package main

import (
	"encoding/json"
	"fmt"
	"net/http"
	"time"
)

type Post struct {
	ID          int       `json:"id"`
	Title       string    `json:"title"`
	Slug        string    `json:"slug"`
	PublishedAt time.Time `json:"published_at"`
	Tags        []string  `json:"tags"`
}

func postsHandler(w http.ResponseWriter, r *http.Request) {
	posts := []Post{
		{ID: 1, Title: "Hello World", Slug: "hello-world", Tags: []string{"intro"}},
	}
	w.Header().Set("Content-Type", "application/json")
	json.NewEncoder(w).Encode(posts)
}

func main() {
	http.HandleFunc("/api/posts", postsHandler)
	fmt.Println("Listening on :8080")
	http.ListenAndServe(":8080", nil)
}

The active highlight theme can be changed by editing highlight in the Vaultex _config.yml. Options include github-dark, monokai, nord, dracula, tokyo-night-dark, and dozens more.