Проверка подсветки синтаксиса 🎨: код-блоки на разных языках

Технический пост для проверки подсветки синтаксиса в Hugo: примеры код-блоков на Go, JS/TS, Python, Bash, YAML, TOML, JSON, SQL и других языках.

5 марта 2026 г. · 3 мин чтения

#Hugo #Подсветка #Markdown #Код

Этот пост нужен как практический тест подсветки синтаксиса после обновления настроек Hugo.
Ниже собрана «матрица» из разных языков программирования и форматов данных, чтобы быстро увидеть, где всё хорошо, а где стоит донастроить стили. 🔍

Go #

package main

import "fmt"

func fib(n int) int {
	if n < 2 {
		return n
	}
	return fib(n-1) + fib(n-2)
}

func main() {
	fmt.Printf("fib(10) = %d\n", fib(10))
}

JavaScript #

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

const upper = users.map((u) => ({
  ...u,
  name: u.name.toUpperCase(),
}));

console.log(upper);

TypeScript #

type ApiResult<T> = {
  data: T;
  error?: string;
};

interface Post {
  id: number;
  title: string;
  published: boolean;
}

function formatPost(p: Post): string {
  return `${p.id}: ${p.title} (${p.published ? "published" : "draft"})`;
}

const result: ApiResult<Post> = {
  data: { id: 42, title: "Hugo Test", published: true },
};

console.log(formatPost(result.data));

Python #

from dataclasses import dataclass
from datetime import datetime

@dataclass
class Event:
    title: str
    created_at: datetime

def is_recent(event: Event, days: int = 7) -> bool:
    delta = datetime.now() - event.created_at
    return delta.days <= days

e = Event("syntax-check", datetime(2026, 3, 1, 9, 30))
print(is_recent(e))

Bash #

#!/usr/bin/env bash
set -euo pipefail

echo "Build Hugo site"
hugo --minify

if hugo list future | rg -q "content/posts/"; then
  echo "Found future posts, fix date first"
  exit 1
fi

echo "OK"

YAML #

name: deploy
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Build
        run: hugo --minify

TOML #

baseURL = "https://example.org/"
languageCode = "ru-RU"
title = "Demo"

[markup]
  [markup.highlight]
    noClasses = false

JSON #

{
  "name": "blog",
  "private": true,
  "scripts": {
    "build": "hugo --minify",
    "check:future": "hugo list future"
  },
  "engines": {
    "node": ">=20"
  }
}

SQL #

SELECT id, title, published_at
FROM posts
WHERE published_at >= '2026-01-01'
ORDER BY published_at DESC
LIMIT 10;

HTML #

<article class="post-card">
  <h2>Проверка рендера</h2>
  <p>Если подсветка читается легко, значит тема настроена корректно.</p>
</article>

CSS #

.code-block {
  border-radius: 10px;
  padding: 1rem;
  overflow-x: auto;
}

.code-block code {
  font-family: "JetBrains Mono", monospace;
}

Dockerfile #

FROM klakegg/hugo:0.157.0-ext
WORKDIR /src
COPY . .
RUN hugo --minify

Rust #

fn factorial(n: u64) -> u64 {
    match n {
        0 | 1 => 1,
        _ => n * factorial(n - 1),
    }
}

fn main() {
    println!("10! = {}", factorial(10));
}

Diff #

 [markup]
   [markup.highlight]
-    style = "algol"
+    noClasses = false

Go HTML Template (Hugo) #

{{ with .GitInfo }}
  <p class="meta">
    Обновлено: {{ .AuthorDate.Format "2006-01-02 15:04" }} · {{ .AuthorName }}
  </p>
{{ else }}
  <p class="meta">GitInfo недоступен</p>
{{ end }}

Итог #

Если на этой странице все блоки читаются комфортно в светлой и тёмной теме, значит базовая конфигурация подсветки работает нормально.
Если какой-то язык выглядит плохо, можно точечно донастроить custom.css или заменить syntax-highlighting.css на другой chroma-стиль. ✅