Nuxt Markdown 与多语言代码块渲染测试

这是一篇专门用来测试文章排版的内容。真实博客经常会同时出现说明文字、代码、表格和引用，如果只用普通段落测试，很容易漏掉细节。

行内代码

行内代码应该和正文保持同一行节奏，例如 pnpm build、queryCollection('articles')、const pageRef = ref(null)。它需要足够明显，但不能像按钮一样抢眼。

引用

好的代码块样式应该让读者先看到结构，再决定是否阅读细节。

引用适合放设计原则、外部观点或阶段性结论。它和正文之间需要有清晰区分，但不应该像警告框一样沉重。

表格

场景	目标	检查点
文章正文	长文阅读	行高、段落间距、标题层级
代码块	技术记录	横向滚动、字体、背景对比
移动端	窄屏阅读	表格溢出、代码换行、触控距离

表格在移动端最容易出问题。最稳妥的策略是允许横向滚动，而不是强行压缩每一列。

TypeScript 示例

TypeScript

type ArticleMeta = {
  title: string
  tags: string[]
  views: number
}

function formatViews(value: number) {
  return value.toLocaleString('zh-CN')
}

const article: ArticleMeta = {
  title: 'Markdown 与代码块渲染测试',
  tags: ['Markdown', 'Nuxt', '代码高亮'],
  views: 638
}

console.log(`${article.title}: ${formatViews(article.views)}`)

Vue 示例

Vue

<script setup lang="ts">
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

<template>
  <button type="button" @click="count++">
    点击 {{ count }} 次，结果 {{ doubled }}
  </button>
</template>

CSS 示例

CSS

.code-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .code-card {
    transition: none;
  }
}

Bash 示例

Bash

pnpm install --frozen-lockfile
pnpm typecheck
pnpm build

检查清单

标题层级是否清晰。
代码块是否有足够的横向空间。
深色主题下代码背景是否刺眼。
移动端表格是否不会撑破页面。
中文和英文混排是否稳定。

这篇文章以后可以作为样式回归测试。每次调整文章内容样式，都先打开它看一遍。