Markdown 实时预览
左边写，右边看 · 手写极简渲染器，零依赖
恢复示例
复制 HTML
Markdown
擂台介绍.md
#
标题
**
粗体
-
列表
`
代码
# 乔木 LLM 擂台 > 同一道题，交给不同的大模型，谁的答卷更漂亮，打开网页一眼便知。 **乔木 LLM 擂台**是一个让大模型「同台过招」的对比项目：每道题都是一段简短的需求，模型要直接交出一个**能在浏览器里打开的网页**，所有答卷并排摆上擂台，由你来当裁判。 ## 擂台怎么比 - **同题同规则**：每位选手拿到的 prompt 与系统提示一字不差 - **只交 HTML**：不讲思路、不写长文，结果直接在浏览器里见分晓 - **看真本事**：比的不是跑分，而是页面上的每一个细节 - 需求有没有做全 - 交互顺不顺手 - 窄屏、空内容这些边角情况 ## 今天这道题 你正在看的页面，就是其中一份答卷。题目只有四行： 1. 左右分栏：左侧 `textarea` 编辑 Markdown，右侧实时预览 2. 支持 `#` 标题、`**粗体**`、`-` 列表和 `` `code` `` 3. 默认塞入一段介绍擂台的 md —— 也就是你正在读的这段 4. 窄屏时改为上下布局 渲染器没有依赖任何库，是手写的。核心思路不过几行正则： ```js const html = md .replace(/^# (.*)$/gm, '<h1>$1</h1>') .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') .replace(/`([^`]+)`/g, '<code>$1</code>'); ``` --- **轮到你了**：在左边随手改几个字，右边立刻跟着变。选中文字按 `Ctrl/⌘ + B` 加粗；在列表项末尾回车，会自动续上一个 `- `。 题目来源：[joeseesun/llm-case-benchmark](https://github.com/joeseesun/llm-case-benchmark)
Preview
实时
需要启用 JavaScript 才能实时预览。