Markdown Editor online

Code

Export

The print dialog opens with the document only. Choose Save as PDF (or "Microsoft Print to PDF") as the printer. In Chrome and Edge, untick "Headers and footers" if the browser offers it. The text in the PDF stays sharp and can be selected.

My documents

Click a document to open it. They are stored only in this browser - nothing is uploaded. Clearing the browser's site data removes them, so download the ones you want to keep.

AI Assistant

Any AI can write with you - ChatGPT, Claude, Gemini, Copilot.

  1. Click Copy prompt.
  2. Paste it into your AI and say what it should write.
The AI should

The document travels in the link after the “#”, which no server sees. What you paste into your AI is handled by its provider.

Save to your server

The editor can send each saved version to your own server (a webhook), so your work is kept where you want it. Nothing is sent until you enter an address here.

What your server receives

A POST request with JSON (your server must allow CORS from https://md.giit.ch):

{ "editor": "md", "event": "save", "id": "…", "name": "Notes",
  "content": "# Notes\n\n…",
  "assets": { "logo.png": "data:image/png;base64,…" },
  "updated": "YYYY-MM-DDTHH:MM:SS.000Z" }
Embed the editor in your website
<iframe src="https://md.giit.ch/?embed=1" style="width:100%;height:80vh;border:0"></iframe>
<script>
const frame = document.querySelector('iframe');
addEventListener('message', e => {
  if (e.origin !== 'https://md.giit.ch' || e.source !== frame.contentWindow) return;
  if (e.data.type === 'mdeditor:ready')
    frame.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes',
      content: '# Notes\n\n…', assets: {} }, 'https://md.giit.ch');
  if (e.data.type === 'mdeditor:save') saveOnYourServer(e.data.content, e.data.assets);
});
</script>

Also possible: ?src=<URL of a .md file> opens a file, &webhook=<URL> saves this document there. The editor can also open in a window of its own (?embed=window), and your page can hand it its own AI prompt and a session key so the AI sends its result to your server (mdeditor:ai, mdeditor:key-request) - see "Use the editor on your own website" below the editor. Details are in llms.txt.

Help

How it works

  1. Write Markdown on the left - or start with New and one of the templates. The preview in the middle shows the document as you type.
  2. Click text in the preview to edit it right there: the cursor is where you clicked, and the code's cursor goes to the same place. Enter or a click elsewhere writes the change into the code (one step for Undo), Escape cancels; characters such as * or _ are escaped so they stay text. A click on math, a picture or code jumps to its place in the code instead. Ctrl + click follows a link. A check box of a task list ticks the task in the code.
  3. Insert on the right has ready-made pieces (headings, lists, tables, math, symbols); Pictures holds the pictures of the document; Outline lists the headings.
  4. Problems (a missing picture, a link to a heading that is not there, a code block that is never closed, a table row with too many cells) are listed above the code - click one to go there.
  5. My documents (the folder button at the top left) lists every document kept in this browser.
  6. Export makes an HTML page, a PDF (via the print dialog) or plain text. Download .md saves the code (with its pictures as ZIP).

The preview understands CommonMark with GitHub's tables, task lists, strikethrough, autolinks and footnotes, and math in $…$ and $$…$$. HTML in the Markdown is shown without scripts, styles, frames and forms.

Keyboard shortcuts

Ctrl + B / I
Bold / italic around the selected text
Ctrl + K
Link
Ctrl + M
Math: $…$ around the selection
Ctrl + /
Lines in or out of a comment (<!-- -->)
Ctrl + Enter
Show the cursor's place in the preview
Tab / Shift + Tab
Indent / outdent
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Save (download .md, or to your server) / export
Ctrl + O
My documents
Ctrl + P
Print / save as PDF

Enter in a list starts the next item (-, 1., - [ ], >); on an empty item it ends the list. * _ ` ~ $ [ ( close by themselves around a selection.

在线编写 Markdown,实时预览

Markdown 编辑器将你的代码和完成的文档并排显示。你输入的内容会立即出现在预览中,包括标题、列表、表格、任务列表、脚注和公式;点击预览中的任意文字,即可跳到它在代码中的位置。你也可以直接在预览中编辑文字。这样就能快速编写 README、笔记、文档和文章。

一切都在你的浏览器中运行。文档不会上传,无需注册,也没有广告。

编辑器的功能

代码高亮

标题、列表、链接、代码、公式和 HTML 各有颜色,带行号,按 Enter 自动续写列表,并清楚列出问题及其所在行。

GitHub Markdown

支持表格、任务列表、删除线、自动链接和脚注的 CommonMark。标题会获得与 GitHub 相同的锚点,指向它们的链接会被检查。

公式

$…$ 中的行内公式和 $$…$$ 中的独立公式,由 KaTeX 直接在预览中排版。

在预览中编辑

在预览中点击句子、标题、列表项或表格单元格并直接修改,Markdown 随之更新,特殊字符会被转义。

图片

将图片拖入编辑器,用 ![description](name.png) 使用它。图片与文档一起保存在你的浏览器中。

导出

内含图片的单个 HTML 文件,通过打印对话框生成的 PDF,纯文本,或带图片的 Markdown ZIP。

使用方法

  1. 开始:在“新建”中选择模板,打开 .md 文件或粘贴 Markdown。
  2. 编写:在代码中输入,预览随之更新。用“插入”添加表格、列表和公式。
  3. 导出:保存 HTML 页面、PDF 或 .md 文件。

在你自己的网站上使用编辑器

任何 https 页面(以及 localhost)都可以用 <iframe> 和 ?embed=1 嵌入编辑器,无需注册,无需密钥。嵌入后,编辑器会隐藏这段文字并显示“保存”按钮。有两种方式传入和取出文档。

1. 从链接打开文件,保存到你的服务器

src= 打开一个文件(你的服务器必须允许 CORS),webhook= 让“保存”(Ctrl+S)把文档发送到该地址。加上 &token=… 可发送 Authorization: Bearer … 请求头,加上 &auto 则每次更改后都会保存。

<iframe src="https://md.giit.ch/?embed=1&src=https://your-site.com/docs/notes.md&webhook=https://your-site.com/save.php"
        allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>

Webhook 会收到一个带 JSON 的 POST 请求 { editor, event: "save", id, name, content, assets, updated }。一个保存它的简短 PHP 脚本:

<?php
header('Access-Control-Allow-Origin: https://md.giit.ch');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Methods: POST, OPTIONS');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') exit;
if (($_SERVER['HTTP_AUTHORIZATION'] ?? '') !== 'Bearer SECRET') { http_response_code(403); exit; }
$d = json_decode(file_get_contents('php://input'), true);
$name = preg_replace('/[^\w\- ]/u', '_', $d['name']);
file_put_contents(__DIR__ . "/docs/$name.md", $d['content']);
echo '{"ok":true}';

2. 由你的页面保存文档(postMessage)

编辑器发送 mdeditor:ready,你的页面以 mdeditor:load 回应,编辑器报告 mdeditor:loaded,有实际编辑时发送 mdeditor:change,用户保存时发送 mdeditor:save。你的页面可以发送 mdeditor:get(获取当前状态)或 mdeditor:save(相当于点击“保存”)。这样保存就通过你自己的登录和会话进行。

<iframe id="ed" src="https://md.giit.ch/?embed=1" allow="clipboard-write" style="width:100%;height:800px;border:0"></iframe>
<script>
const ed = document.getElementById('ed');
const ORIGIN = 'https://md.giit.ch';

addEventListener('message', async e => {
  if (e.source !== ed.contentWindow || e.origin !== ORIGIN) return;
  const m = e.data;
  if (m.type === 'mdeditor:ready') {                // 编辑器已就绪:把文档交给它
    ed.contentWindow.postMessage({
      type: 'mdeditor:load',
      name: 'Notes',
      content: await (await fetch('/docs/notes.md')).text(),
      assets: { 'logo.png': 'data:image/png;base64,…' }   // 可选的图片
    }, ORIGIN);
  }
  if (m.type === 'mdeditor:change') document.title = '● not saved';   // 一次实际编辑
  if (m.type === 'mdeditor:save') {                 // 用户点击了“保存”
    await fetch('/api/save', { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: m.name, content: m.content, assets: m.assets }) });
    document.title = 'Saved';
  }
});

// 你自己页面上的保存按钮:回应以 mdeditor:save 返回
function saveNow() { ed.contentWindow.postMessage({ type: 'mdeditor:get' }, ORIGIN); }
</script>

页面内的 AI 助手:在框架中同样可用。在 iframe 上设置 allow="clipboard-write" 后,“复制提示词”会直接使用剪贴板(否则编辑器会退回旧的复制命令,或显示提示词供手动复制)。AI 发送的链接无法到达另一个网站中的编辑器,因此编辑器会提示 AI 和用户把 AI 的完整回答粘贴到编辑器中,或在单独的窗口中打开编辑器。

3. 在单独的窗口中

window.open("https://md.giit.ch/?embed=window", "mdeditor-17") 会在单独的窗口中打开完整的编辑器,并通过 window.opener 使用相同的消息。AI 的链接可以到达那里。mdeditor:load 还可以带上 context: { host, title, rules }(AI 提示词随后会说明文档属于哪里,并遵循你的规则),以及 hook: { url, token, assets: false },即仅用于此文档、从不保存的 Webhook。关闭有未保存更改的窗口时会发送 mdeditor:closing。

4. 通过你自己的服务器使用 AI

向编辑器提供你自己的提示词、你网站上的一个地址和本次编辑器会话的密钥。AI 对话框随后会显示“已连接到”你的网站、你告诉 AI 的内容,以及修改当前文档或新建一个文档的选项;复制提示词会把这些都组合起来。AI 带着密钥把结果发送到你的服务器,你的页面再在编辑器中打开它;新文档会单独打开,并保留在用户的浏览器中。每个编辑器会话一个密钥:编辑器打开期间有效,只有在没有密钥时,编辑器才会用 mdeditor:key-request 请求。编辑器自己从不发送密钥,也从不保存它;地址必须是你自己主机或其子域名上的 https 地址。

const key = async () => (await fetch('/api/ai-key.php?doc=17')).json();   // 每个编辑器会话一个密钥
const k = await key();
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', content, ai: {
  label: 'My Site', prompt: 'Keep the [[placeholders]]. Write in German.',
  endpoint: 'https://your-site.com/api/ai-result.php', key: k.key } }, ORIGIN);
// 记住 mdeditor:loaded 中的 id,忽略 id 不同的 change/save/closing
// 仅在编辑器没有密钥时:
if (m.type === 'mdeditor:key-request') { const k = await key(); ed.contentWindow.postMessage({ type: 'mdeditor:ai', key: k.key }, ORIGIN); }
// 编辑器打开期间,每分钟通知你的服务器;关闭编辑器或页面会使密钥作废
setInterval(() => fetch('/api/ai-key.php?alive=' + k.key.slice(0, 8)), 60000);
// 你的服务器有了结果(轮询、SSE …):target 为 "current" 或 "new"
ed.contentWindow.postMessage({ type: 'mdeditor:load', name: 'Notes', content: draft, from: 'ai', target }, ORIGIN);
<?php // api/ai-key.php:已登录用户本次编辑器会话的密钥(由你的页面调用)
session_start();                                     // 检查用户是否可以编辑此文档
$key = bin2hex(random_bytes(24));
$_SESSION['ai'][hash('sha256', $key)] = ['doc' => (int)$_GET['doc'], 'seen' => time()];  // 或存入你的数据库;?alive= 会重新设置 seen
echo json_encode(['key' => $key]);

<?php // api/ai-result.php:AI 向这里发送(无需 CORS 头:AI 从服务器调用它)
$key = preg_replace('/^Bearer\s+/', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
$row = find_key(hash('sha256', $key));               // 你的数据库:未作废,且在最近 3 分钟内出现过
if (!$row) { http_response_code(401); exit('{"ok":false,"error":"key not valid"}'); }
$d = json_decode(file_get_contents('php://input', false, null, 0, 2000000), true);
save_draft($row['doc'], $d['content'], $d['target'] === 'new' ? 'new' : 'current');   // 你的页面用 mdeditor:load 显示它
echo '{"ok":true}';

密钥至少使用 128 位随机数,只保存其哈希值,将每个密钥绑定到已登录用户、文档和本次编辑器会话,每个会话一个,仅在你的页面报告会话仍打开时有效,并在编辑器或页面关闭时作废。

完整协议见 llms.txt,把它交给 AI,AI 就能为你的系统建立连接。LaTeX 编辑器和 SVG 编辑器的用法相同,前缀分别为 latexeditor: 和 svgeditor:,见 latex.giit.ch、svg.giit.ch。

常见问题

我的文档会被上传吗?

不会。编辑器完全在你的浏览器中运行。你的文档和图片绝不会发送到服务器,除非你自己设置了指向自己服务器的 Webhook。

编辑器支持哪种 Markdown?

支持带 GitHub 扩展的 CommonMark:表格、任务列表、删除线、自动链接和脚注,以及 $…$ 和 $$…$$ 中的公式。标题会获得与 GitHub 相同的锚点,因此 [see below](#my-heading) 这样的链接可以正常使用。

如何得到 PDF 或 HTML 页面?

点击“导出”。选择 PDF 并点击“打印 / 另存为 PDF”,然后在打印对话框中选择“另存为 PDF”。或选择 HTML 页面,得到内含图片和样式的单个文件。

如何添加图片?

将图片拖入或粘贴到编辑器中,或在右侧的图片标签页中添加。图片与文档一起保存在你的浏览器中,通过 ![description](name.png) 使用。

我的文档保存在哪里?

只保存在你的浏览器中。点击左上角的文件夹按钮(我的文档)即可打开、重命名、复制、下载或删除它们。清除浏览器的网站数据会删除它们,因此请下载需要保留的文档,或让编辑器把它们发送到你自己的服务器(“保存到服务器”)。

AI 能在 Markdown 编辑器中写作吗?

能,任何 AI 都可以:ChatGPT、Claude、Gemini、Copilot 或你编程工具中的 AI。点击“AI 助手”,再点击“复制提示词”,粘贴到你的 AI 中并说明要写什么。AI 会回复一个链接;点击它,文档就会出现在你的编辑器中。“撤销”可撤回每一处更改。

我可以在自己的网站上使用编辑器吗?

可以。用 iframe 嵌入它并通过 postMessage 交换文档,或让它通过 Webhook 把每个保存的版本发送到你的服务器。示例见在你自己的网站上使用编辑器。

Markdown 编辑器收费吗?

不收费。编辑器免费,没有广告,无需注册。