惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Engineering at Meta
Engineering at Meta
D
Docker
IT之家
IT之家
博客园_首页
罗磊的独立博客
V
V2EX
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
美团技术团队
Y
Y Combinator Blog
博客园 - 聂微东
量子位
阮一峰的网络日志
阮一峰的网络日志
GbyAI
GbyAI
Microsoft Security Blog
Microsoft Security Blog
博客园 - Franky
Martin Fowler
Martin Fowler
Jina AI
Jina AI
大猫的无限游戏
大猫的无限游戏
C
Check Point Blog
月光博客
月光博客
G
Google Developers Blog
B
Blog
T
The Blog of Author Tim Ferriss
爱范儿
爱范儿

Flatpaper Demo

FlatPaper(v0.4.0) 新特性:沉浸式手帐风留言板,把评论变成贴纸盲盒 | Flatpaper Demo Hexo 中 `marked.smartypants` 与 `quotes` 配置详解 | Flatpaper Demo FlatPaper 文章顶部图:top_img 与 post_top_img 配置 | Flatpaper Demo FlatPaper 主题重磅更新:优雅的朋友圈 (Friend Circle) 信息流 | Flatpaper Demo FlatPaper 现在支持 Google Fonts 了 | Flatpaper Demo FlatPaper 首页 Hero:开屏、背景图与贴纸配置 | Flatpaper Demo 主题效果总览:文章块与交互组件预览 | Flatpaper Demo 更新日志:FlatPaper 现已支持赞赏码 | Flatpaper Demo FlatPaper 内置图标速查 | Flatpaper Demo Hello World | Flatpaper Demo 多级标题测试:从一级标题到六级标题 | Flatpaper Demo 多级标题测试:从一级标题到六级标题 外链与脚注测试:链接样式、长 URL 与引用来源 | Flatpaper Demo 外链与脚注测试:链接样式、长 URL 与引用来源 用 VitePress 风格的 note 容器语法 | Flatpaper Demo 用 VitePress 风格的 note 容器语法 图片排版预览:多图、图注与长图测试 | Flatpaper Demo 图片排版预览:多图、图注与长图测试 多语言代码示例:用于测试代码高亮 在 Hexo 中使用 NOTE 提示块 | Flatpaper Demo 在 Hexo 中使用 NOTE 提示块 Hello World FlatPaper 主题页面检查清单 | Flatpaper Demo FlatPaper 主题页面检查清单 Markdown 元素展示:表格、代码与引用 | Flatpaper Demo Markdown 元素展示:表格、代码与引用 FlatPaper 设计札记:纸感、留白与轻量界面 | Flatpaper Demo FlatPaper 设计札记:纸感、留白与轻量界面 周末散步记录:从街角咖啡店到河岸 | Flatpaper Demo 周末散步记录:从街角咖啡店到河岸
多语言代码示例:用于测试代码高亮 | Flatpaper Demo
Author · 2026-05-16 · via Flatpaper Demo
写作示例

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

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
type PostMeta = {
title: string;
date: string;
tags: string[];
draft?: boolean;
};

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

Python

1
2
3
4
5
6
7
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

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.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

1
2
3
4
5
6
7
8
9
#!/bin/sh

set -eu

POST_DIR="source/_posts"

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

Bash

1
2
3
4
5
6
7
8
9
#!/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

1
2
3
4
5
6
7
8
9
10
11
12
#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

1
2
3
4
5
6
7
8
9
{
"name": "flatpaper",
"version": "1.0.0",
"features": ["archives", "categories", "tags", "code-highlight"],
"theme": {
"excerpt_length": 96,
"recent_posts": 3
}
}

YAML

1
2
3
4
5
6
7
title: 多语言代码示例
date: 2026-05-16 10:20:00
categories:
- 写作示例
tags:
- 代码块
- 高亮

SQL

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
<% 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
这是一行很长的文本,用来检查代码块在窄屏下是否会正确横向滚动,而不是撑破文章容器或者覆盖侧边栏内容。

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