📝
免費Markdown 編輯器
即時編寫和預覽 Markdown。支援標題、粗體、斜體、程式碼區塊、表格和列表。
載入後可離線使用
53 詞數 · 351 字元
Markdown
預覽
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">歡迎使用Markdown編輯器</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">在左側編寫<strong>Markdown</strong>，在右側檢視即時預覽。</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">功能</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>粗體</strong>、<em>斜體</em>和<del>刪除線</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">行內程式碼</code>和程式碼區塊</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">連結</a></li><li class="my-0.5">列表、引用塊、表格等</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">程式碼範例</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown由John Gruber在2004年建立，旨在使網路寫作變得更加簡便。</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">功能</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">支援</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">標題</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">列表</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">表格</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">程式碼</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown 速查表
# Heading 1H1
**bold**粗體
*italic*斜體
`code`行內程式碼
- item無序列表
1. item有序列表
> quote塊引用
[text](url)連結
圖片
---分隔線
工作原理
預覽由直接內建在工具中的手寫 Markdown 解析器渲染——沒有 marked、沒有 remark，也沒有外部庫。它在瀏覽器中逐行對源文字分詞，將語法轉換為 HTML，並在顯示前經過清理器處理。
- 1逐行分詞自定義的 renderMarkdown 函式按換行拆分源文字並一次遍歷，按優先順序符合圍欄程式碼區塊、標題（H1–H6）、引用塊、有序和無序列表、GFM 表格（含列對齊）、水平線和段落。
- 2內聯語法展開然後每個收集到的行或單元格由 inlineMarkdown 處理，這是一系列正則替換，處理粗體（** 和 __）、斜體（* 和 _）、粗斜體（***）、刪除線（~~）、行內程式碼（）、圖片（）和連結（[text](url)）——圖片在連結之前解析，以免錯誤地消耗 ! 字首。
- 3清理與遠端資源攔截渲染器產生的原始 HTML 會經過清理器（sanitize-html），去除 <script>、onerror 處理常式和 javascript: 連結等不安全的標籤和屬性。第二輪處理（neutralizeRemote）預設將遠端圖片的 src 值替換為佔位符，防止預覽在你同意之前悄悄連線外部伺服器。
- 4匯出為 .md 或獨立 .html複製或下載 Markdown 會寫入原始源文字。下載 HTML 會將清理後的輸出包裝為帶內聯樣式表的獨立文件——Tailwind 類只在本站內有效，因此匯出時改為打包普通 CSS 規則，使檔案在任何地方都能正常閱讀。