https://caed2eb5.hugo-theme-liquid-demo.pages.dev/tags/html/A privacy-safe demo of Hugo Theme Liquid for layout, typography, and progressive glass surfaces.Hugo -- gohugo.iozh-CNhttps://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/code-highlighting-showcase/Tue, 25 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/code-highlighting-showcase/How to Read This Page The examples are intentionally small. Their purpose is to reveal whether code blocks have the right font, padding, contrast, border, and scroll behavior—not to teach each language. Inline tokens such as hugo, content/posts/example.md, --accent-color, and npm run build should sit naturally inside paragraphs. HTML <article class="post-card"> <h2>Readable by default</h2> <p>Structure gives the stylesheet something meaningful to style.</p> </article> CSS .prose-article { max-width: 70ch; margin-inline: auto; overflow-wrap: anywhere; } @media (prefers-color-scheme: dark) { .prose-article { color: #edf4f1; } } JavaScript const headings = document.querySelectorAll('article h2, article h3'); headings.forEach((heading) => { heading.dataset.ready = 'true'; }); TypeScript type Article = { title: string; tags: string[]; published: Date }; function label(article: Article): string { return `${article.title} · ${article.tags.length} tags`; } Go package main import "fmt" func main() { for _, word := range []string{"calm", "clear", "useful"} { fmt.Println(word) } } Python from dataclasses import dataclass @dataclass class Note: title: str published: bool = True print(Note("A small content model")) Rust fn main() { let pages = ["home", "posts", "about"]; for page in pages { println!("/{page}/"); } } Bash #!/usr/bin/env bash set -euo pipefail hugo --gc --minify JSON { "title": "Code Showcase", "draft": false, "features": ["highlighting", "overflow", "contrast"] } YAML params: codeTheme: quiet showLineNumbers: false allowHorizontalScroll: true TOML baseURL = "https://example.test/" title = "A small documentation site" enableRobotsTXT = true Markdown ## A heading Write a paragraph with **emphasis** and `inline code`. SQL SELECT category, COUNT(*) AS post_count FROM content_index WHERE published_at <= CURRENT_DATE GROUP BY category ORDER BY post_count DESC; Long Code Line The next line is intentionally unreasonable. It should scroll inside the code block rather than widen the page or create horizontal overflow on the document itself. https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/everything-showcase/Fri, 07 Aug 2026 00:00:00 +0000https://caed2eb5.hugo-theme-liquid-demo.pages.dev/posts/everything-showcase/The Surface of a Modern Hugo Theme A modern Hugo theme begins with an old-fashioned question: what should this page help a person do? The answer might be read a careful essay, find a related note, understand when something was published, or decide whether a link is worth opening. Visual polish matters, especially when a theme uses soft translucency and layered surfaces, but polish is most convincing when it follows a clear content structure.