技术预览提交反馈
Livemark
Livemark静态站点生成器

开源 · MIT 许可证

Markdown
静态站点生成器，
无拘无束。

按你喜欢的方式组织 Markdown，再随心定制：替换为你自己的 React 组件，用 Tailwind 重新设计样式，添加 TanStack Start 页面。文档、博客和更新日志开箱即用。

快速开始查看源码
一个 Livemark 文档页面，带有侧边栏、高亮的代码块和目录

用纯 Markdown 编写

docs/code-blocks.md
---
title: Code Blocks
---
```ts title="livemark.config.ts"

不碍你的事

不强制目录结构，不绑定平台。Livemark 适应你的仓库，而不是反过来。

  • 任意文件布局

    把 include glob 指向你现有的 Markdown。README、CONTRIBUTING 和 CHANGELOG 也会变成页面。

  • 真正的 TanStack Start 页面

    把一个 .tsx 文件放进 .livemark/routes/，即可制作定价页、仪表盘或其他任何页面。这个首页就是其中之一。

  • Tailwind，完全可定制

    基于 Tailwind v4 和 shadcn 风格的基础元素构建。用 CSS 变量重新定制样式，在自己的页面中使用工具类，或在 .livemark/ 下覆盖任意组件。

your-repo
.livemark/
└─ routes/
   ├─ pricing.tsx
   └─ dashboard.tsx
guides/
├─ setup.md
└─ faq.md
src/
README.md
CHANGELOG.md
livemark.config.ts

开箱即美

丰富的 Markdown、精致的移动端体验和合理的默认设置。只定制你想改的部分。

Shiki 语法高亮

开箱即支持 100 多种语言、Catppuccin 主题、diff、行高亮以及 TwoSlash 类型提示。

图表与公式

Mermaid 流程图和 KaTeX 公式，自动适配主题，无需配置。直接写在 Markdown 里即可。

丰富的 Markdown 语法

提示框、标签页、步骤、卡片、文件树和徽章都是简单的指令——需要更多时还可以使用 MDX 组件。

多语言站点

用一个同名的兄弟文件翻译任意页面。内置 7 种语言的界面文本、语言选择器和 hreflang 标签。

移动端完美呈现

底部弹出式导航，页面目录一触即达，任何手机上都不会横向滚动。

文档、博客和更新日志

多个内容栏目，支持标签、日期和自动生成的索引页，全部通过配置完成。

搜索与导航

Orama 全文搜索、按栏目划分的侧边栏、键盘快捷键和智能目录。

深色模式与主题变量

内置深色模式、浅色/深色图片变体、--primary 等 CSS 变量，以及可替换的 Shiki 主题。

即时预览，静态输出

保存即在浏览器中呈现修改，无需刷新。随后生成带有 sitemap、robots 和 RSS 的静态构建。

写 Markdown，发布网站。

你的 .md 文件保持原样——其余的交给 Livemark。

quickstart.md
---
title: Quickstart
icon: rocket
---

# Quickstart

Install the package:

```bash
npm install livemark
```

:::tip
Run livemark dev and open the browser.
:::

## Features

- **Fast** rebuilds with Vite
- **MDX** components when you need them
- _Beautiful_ out of the box
渲染结果

Quickstart

Install the package:

npm install livemark
TIP

Run livemark start and open the browser.

Features

  • · Fast rebuilds with Vite
  • · MDX components when you need them
  • · Beautiful out of the box

为 AI 智能体做好准备

每次构建都会在面向人的 HTML 之外，以 AI 智能体所需的格式发布你的站点。无需任何配置。

终端
$ curl -H "Accept: text/markdown" \
    livemark.dev/introduction/

HTTP/2 200
content-type: text/markdown

# Introduction

> Learn how to set up your
> first Livemark project.

## What you get

- **Just write Markdown.**
  GitHub-flavored Markdown works out
  of the box, with footnotes and gemoji.

:::tip
Every page has a twin like this one —
list them all at /llms.txt.
:::

  • 每个页面都有 Markdown 副本

    每个页面的 HTML 旁都有一个 index.md，并在页面 head 中链接。一条 CDN 规则即可把它提供给发送 Accept: text/markdown 的请求。

  • 开箱即用的 llms.txt

    一个按栏目分组、列出所有副本的 llms.txt 索引，并通过首页的 Link 响应头公布。

  • 内容信号

    robots.txt 声明你的页面能否用于搜索、AI 回答或模型训练。改一个配置项即可调整。

  • 智能体技能

    把 skills 指向你的 SKILL.md 文件，它们就会发布在 /.well-known/agent-skills/ 下。

  • 为你的编程智能体准备的技能

    npx skills add https://livemark.dev 让 Claude Code、Cursor 或 Codex 学会编写、配置和定制你的 Livemark 站点。

Livemark 如何服务 AI 智能体 →

你的网站，Livemark 的 Markdown

已经有 Vite + React 应用？用同样的处理管线和组件在其中渲染 Markdown，无需整体采用 Livemark。

  • 一个 Vite 插件

    添加 @livemark/vite，即可把任意 .md 或 .mdx 文件作为 React 组件导入，并附带其 frontmatter 和目录。

  • 相同的组件

    提示框、标签页、卡片、Shiki 代码块、Mermaid 和 KaTeX 的渲染效果与 Livemark 文章完全一致。每次渲染都可替换其中任意组件。

  • 由你的 Tailwind 定制样式

    一行 @import 即可把 Markdown 样式引入你的 Tailwind v4 构建，并使用你自己的主题变量。

vite.config.ts
import markdown from "@livemark/vite"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [markdown()],
})
routes/blog/post.tsx
import Post from "./post.md"

export function PostPage() {
  return <Post />
}
阅读 Markdown Vite 插件指南 →

开始写作。 其余的交给 Livemark。

把 Livemark 指向你现有的 Markdown，需要时添加页面，然后部署。这就是全部的设置。

阅读文档查看更新

出品方

Datist——端到端的软件开发。