mx-clarity 主题能力一览

这是一篇示例文章，把 mx-clarity 这个主题能显示的东西尽量都放了进来：文字排版、列表与表格、代码与公式、图片与视频、投票、地图、股票、链接卡片，还有划词评论、朗读、在读位置这些互动。每一节先说它是什么，再放一个实际的例子。

文章用 mx-space 后台的 Lexical 编辑器格式写成。读的时候可以试试：选中正文里的一段文字会浮出「评论这段」；宽屏时把鼠标移到段落左边，会出现段落评论的按钮；右侧的进度条上能看到别的读者读到了哪里。

文字

行内格式：粗体、斜体、下划线、~~删除线~~、行内代码、高亮，还有上标 E = mc² 与下标 H₂O。它们也可以叠在一起：粗斜体加高亮。

剧透会先打上马赛克，点一下才显示：。注音写在字的上方：东京とうきょう、饕餮tāo tiè。行内公式 $e^{i\pi} + 1 = 0$ 与正文同高。

提到别人时，平台与账号合成一个链接：mx-space（GitHub）。标签长这样：#示例。脚注在右上角带编号^[1]，点了跳到文末，再点 ↩ 回来。

站内链接在宽屏上点开是预览窗，不离开这一页：比如这篇日记《搬家》。按住 Ctrl 或 ⌘ 点击照常在新标签页打开。站外链接 mx-space 文档直接打开。

无序列表的一项
可以带格式与链接
第三项

有序列表可以从任意数字开始
这一个从 3 开始
依次往下数

写好示例文章
上传插图与附件
等读者来留言

引用

普通的引用块：别人说过的话，或者需要单独拎出来的一段。

简单的事情应该简单，复杂的事情应该可能。
— Alan Kay

提示与横幅

信息

说明：补充上下文，读者跳过也不影响理解。

提醒

提示：更顺手的做法，比如「按 Ctrl + K 可以搜索全站」。

问题

重要：读者必须知道的事。

警告

警告：做之前要想清楚的事。

错误

危险：可能造成损失的操作。

提醒

横幅是另一种样式的提示，这一条是「成功」。

代码

代码块按语言高亮，右上角能一键复制；行内代码与正文字号一致。

import { createClient } from '@mx-space/api-client'

// 主题的服务端这样取文章
const client = createClient(adapter)(process.env.NUXT_MX_API_URL)
const post = await client.post.getPost('demo', 'mx-clarity-showcase')
console.log(post.title)

compose.ymlyaml

services:
  mx-clarity:
    image: yreidev/mx-clarity:latest
    environment:
      NUXT_MX_API_URL: http://app:2333/api/v3
    ports:
      - 127.0.0.1:3000:3000

nginx.confnginx

location / {
  proxy_pass http://127.0.0.1:3000;
  proxy_set_header Host $host;
}

单独成段的 GitHub 文件链接，主题的服务端会把文件取来，画成带文件名与行号的代码块（读者的浏览器不连 GitHub）：

mx-space/core · README.md#L1-L12md

<p align="center">
  <img src="./.github/branding/logo-icon.png" alt="mx-space" width="120" />
</p>

<h1 align="center">Mix Space</h1>

<p align="center">
  Monorepo for the Mix Space personal-CMS stack — the core server, admin dashboard,
  native iOS client, privacy-preserving push relay, telemetry, and the shared SDKs
  that bind them.
</p>

在 GitHub 上看

公式与图表

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

表格

功能	在哪里	要不要配置
划词评论	选中正文	不用
朗读	正文前的播放条	要 core 配好 AI 朗读
股票	正文里的行情块	要 core 配行情的 key
交互地图	正文里的地图块	不用