多语言代码示例：用于测试代码高亮

这篇文章用于测试主题在不同代码语言下的高亮、行距、横向滚动和暗色背景表现。它包含前端、后端、配置文件、命令行和数据库查询等常见代码块。

JavaScript

const posts = [
  { title: '主题开发记录', category: '开发日志' },
  { title: 'Markdown 元素展示', category: '写作示例' },
  { title: '周末散步记录', category: '生活' }
];

const grouped = posts.reduce((result, post) => {
  result[post.category] ||= [];
  result[post.category].push(post);
  return result;
}, {});

console.log(grouped);

TypeScript

type PostMeta = {
  title: string;
  date: string;
  tags: string[];
  draft?: boolean;
};

function isPublished(post: PostMeta): boolean {
  return post.draft !== true && Boolean(post.title.trim());
}

Python

from pathlib import Path

posts_dir = Path("source/_posts")

for path in posts_dir.glob("*.md"):
    title = path.stem.replace("-", " ").title()
    print(f"{title}: {path.stat().st_size} bytes")

HTML

<article class="post-card">
  <h2><a href="/posts/theme-layout-checklist/">FlatPaper 主题页面检查清单</a></h2>
  <p>用于检查首页卡片、文章详情、归档、分类和标签页的基础展示效果。</p>
</article>

CSS

.post-card {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 24px;
  padding: 24px;
  border-radius: 8px;
  background: #fffdf7;
}

.post-card h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

Shell

#!/bin/sh

set -eu

POST_DIR="source/_posts"

for file in "$POST_DIR"/*.md; do
  printf 'Checking %s\n' "$file"
done

Bash

#!/usr/bin/env bash

set -euo pipefail

posts_dir="source/_posts"
latest_post="$(find "$posts_dir" -name '*.md' -print | sort | tail -n 1)"

echo "Latest post file: ${latest_post}"
pnpm build

C

#include <stdio.h>
#include <string.h>

int main(void) {
    const char *title = "FlatPaper theme test";
    size_t length = strlen(title);

    printf("Post title: %s\n", title);
    printf("Title length: %zu\n", length);

    return 0;
}

PowerShell

1
2
3

Get-ChildItem source\_posts -Filter *.md |
  Sort-Object LastWriteTime -Descending |
  Select-Object Name, Length, LastWriteTime

JSON

{
  "name": "flatpaper",
  "version": "1.0.0",
  "features": ["archives", "categories", "tags", "code-highlight"],
  "theme": {
    "excerpt_length": 96,
    "recent_posts": 3
  }
}

YAML

title: 多语言代码示例
date: 2026-05-16 10:20:00
categories:
  - 写作示例
tags:
  - 代码块
  - 高亮

SQL

select
  category,
  count(*) as post_count,
  max(published_at) as latest_post
from posts
where draft = false
group by category
order by latest_post desc;

EJS

<% posts.forEach(function(post) { %>
  <article class="archive-item">
    <time><%= date(post.date, 'YYYY-MM-DD') %></time>
    <a href="<%- url_for(post.path) %>"><%= post.title %></a>
  </article>
<% }) %>

长行测试

1	这是一行很长的文本，用来检查代码块在窄屏下是否会正确横向滚动，而不是撑破文章容器或者覆盖侧边栏内容。

如果这些代码块在文章详情页里都能保持可读，说明主题的代码高亮基础样式已经比较稳定。