内容样式测试

这篇文章用来展示博客支持的所有内容样式。

Inline Code

行内代码用反引号包裹，例如 const answer = 42 或 nuxt build。

Code Block

普通代码块用三个反引号加语言名：

const stack = ['Nuxt 4', 'SQLite', 'Markdown']
console.log(stack.map((s) => s.toUpperCase()))

With title and highlighting

带标题的代码块，在语言名后加 title="..."：

export function formatDate(value) {
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return ''
  return date.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })
}

Sandpack Code Block

一个可运行的 HTML 片段（点击「运行」在线预览）：

<button id="btn" style="font-size:20px;padding:10px 16px">0</button>
<script>
  let n = 0
  document.getElementById('btn').addEventListener('click', () => {
    n += 1
    document.getElementById('btn').textContent = n
  })
</script>

横向布局用 playground-h（代码在左、预览在右）：

<div style="max-width:280px;border-radius:12px;padding:20px;background:linear-gradient(135deg,#22d3ee,#a78bfa);color:#fff;font-family:sans-serif">
  <h3 style="margin:0 0 8px">横向预览</h3>
  <p style="margin:0">这是一个横向布局的可运行代码块。</p>
</div>

Command Center / Search

点击右上角的「搜索」按钮，或按 Ctrl + K（Mac 为 ⌘K），即可唤起命令面板，按标题搜索并快速跳转。

Callout

Image

Video

Before / After Image

拖动中间的滑块对比两张图：

Gallery