Moodown 代码块展示与使用说明

代码块效果说明

Moodown 的文章、资源介绍和安装说明现已支持统一的代码展示样式。普通命令可以使用行内代码，例如 npm run build；多行代码使用代码块展示。

代码块采用 macOS 窗口风格，包含红、黄、绿三个控制点，支持横向滚动、移动端显示和夜间模式。

HTML 示例

复制<section class="welcome-card">
  <h1>欢迎使用 Moodown</h1>
  <p>发现和分享优质数字资源。</p>
  <button type="button">立即查看</button>
</section>

CSS 示例

复制.welcome-card {
  display: grid;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  gap: 12px;
}

.welcome-card button {
  width: max-content;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
}

JavaScript 示例

复制const loadResource = async (id) => {
  const response = await fetch(`/api/resources/${id}`)
  if (!response.ok) {
    throw new Error('资源加载失败')
  }
  return response.json()
}

loadResource(5).then(resource => {
  console.log(resource.title)
})

PHP 示例

复制<?php

use app\common\model\Resource;

$resource = Resource::query()
    ->where('status', 2)
    ->where('is_top', 1)
    ->first();

echo $resource?->title ?? '暂无置顶内容';

Shell 示例

复制# 安装依赖
npm install

# 本地开发
npm run dev

# 正式构建
npm run build

# 启动 Nuxt 服务端产物
node .output/server/index.mjs

编辑器使用方式

• 短命令或字段名使用行内代码，例如 access_type。
• 多行代码使用 <pre><code>...</code></pre>。
• HTML 标签需要转义后再放入代码块，避免被浏览器当作页面元素解析。
• 代码较长时会自动出现横向滚动条，不会撑破文章宽度。