Code Highlighting Showcase
A language sampler for syntax highlighting, inline code, and horizontal overflow.
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.
const deliberatelyLongIdentifier = buildPreviewCard({title: "A line with no friendly break points", description: "The code block should preserve this line and provide a local horizontal scroll affordance", metadata: {category: "Development", status: "regression-test", generatedAt: "2026-08-25T14:30:00+08:00"}}); // This sentence keeps going to make the overflow behavior visible.
Code Adjacent Content
This paragraph sits immediately before a code block. The space should be deliberate and stable.
paragraph -> code block -> paragraph -> code block -> list
The paragraph after the block ensures that the bottom margin is not accidentally swallowed by a neighboring element.
{"adjacent": true, "purpose": "check spacing", "next": "list"}
- First item after a code block
- Second item with
another inline token - Third item with a nearby link