Quick RSS Feed: Marknative：原生 Markdown 渲染引擎，无需浏览器即可生成高质量 PNG / SVG 文档 #331

https://wangchujiang.com/quick-rss/issue/331.html

Author: actions-user

docs/issue/331.md

@@ -0,0 +1,56 @@
+Marknative：原生 Markdown 渲染引擎，无需浏览器即可生成高质量 PNG / SVG 文档
+===
+
+一款原生的 Markdown 渲染引擎，可直接生成分页的 PNG / SVG 文档——无需浏览器、无需 Chromium、无需 DOM。
+
+<img alt="Marknative" src="https://github.com/user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52" />
+
+支持 CommonMark、GFM（表格、任务列表、删除线）、代码高亮（基于 Shiki）以及 LaTeX 数学公式（基于 MathJax），全部在服务端完成渲染。
+
+它不是基于浏览器截图，也不依赖 Chromium、DOM 或 WebView，而是一款真正的原生 Markdown 渲染引擎，可以直接将 Markdown 内容渲染成分页的 PNG / SVG 文档。
+
+通过原生渲染管线直接生成图片:
+
+```
+Markdown → 解析 → 排版 → Canvas / Vector 绘制 → 导出图片
+```
+
+如果你正在寻找一款真正适合服务端使用的 Markdown 渲染方案，那么我很推荐试试
+
+```ts
+import { renderMarkdown } from 'marknative'
+
+const pages = await renderMarkdown(`
+# Hello, marknative
+
+A native Markdown rendering engine that produces **paginated PNG pages**
+without a browser.
+
+- CommonMark + GFM support
+- Deterministic layout and pagination
+- PNG and SVG output
+`)
+
+console.log(`Rendered ${pages.length} page(s)`)
+
+for (const [i, page] of pages.entries()) {
+  // page.format === 'png'
+  // page.data   === Buffer
+  await Bun.write(`page-${i + 1}.png`, page.data)
+}
+```
+
+👉 https://github.com/liyown/marknative
+
+---
+
+<p align="center">
+<a href="https://github.com/liyown/marknative" target="_blank">🔗 查看链接</a> • 
+<a href="https://github.com/jaywcjlove/quick-rss/issues/new/choose" target="_blank">投稿/推荐/自荐</a> • 
+<a href="https://wangchujiang.com/quick-rss/feeds/index.html" target="_blank">Quick RSS</a> • 
+<a href="https://github.com/jaywcjlove/quick-rss/issues/331" target="_blank">#331</a> • 
+<a href="https://github.com/jaywcjlove" target="_blank">@jaywcjlove</a>
+</p>
+
+---
+    

feeds/README.md

@@ -11,6 +11,11 @@ https://wangchujiang.com/quick-rss/feed.xml
 
 <!--RSS_LIST_START-->
 
+## [Marknative：原生 Markdown 渲染引擎，无需浏览器即可生成高质量 PNG / SVG 文档](https://wangchujiang.com/quick-rss/issue/331.html) 
+
+![](https://github.com/user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52)
+
+一款原生的 Markdown 渲染引擎，可直接生成分页的 PNG / SVG 文档——无需浏览器、无需 Chromium、无需 DOM。 支持 CommonMark、GFM（表格、任务列表、删除线）、代码高亮（基于 Shiki）以及 LaTeX 数学公式（基于 MathJax），全部在服务端完成渲染。 它不是基于浏览器截图，也不依赖 Chromium、DOM 或 WebView，而是一款真正的原生 ([#331](https://github.com/jaywcjlove/quick-rss/issues/331) - [@jaywcjlove](https://github.com/jaywcjlove))
 ## [CodeBurn：追踪 AI 编码 token 成本的交互式仪表板](https://wangchujiang.com/quick-rss/issue/330.html) 
 
 ![](https://github.com/user-attachments/assets/da0434a3-b29e-44d1-9d0c-1ab079f76ea9)

feeds/feed.json

@@ -10,6 +10,19 @@
         "url": "https://wangchujiang.com/"
     },
     "items": [
+        {
+            "id": "331",
+            "content_html": "<p>一款原生的 Markdown 渲染引擎，可直接生成分页的 PNG / SVG 文档——无需浏览器、无需 Chromium、无需 DOM。</p>\n<img alt=\"Marknative\" src=\"https://github.com/user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52\">\n<p>支持 CommonMark、GFM（表格、任务列表、删除线）、代码高亮（基于 Shiki）以及 LaTeX 数学公式（基于 MathJax），全部在服务端完成渲染。</p>\n<p>它不是基于浏览器截图，也不依赖 Chromium、DOM 或 WebView，而是一款真正的原生 Markdown 渲染引擎，可以直接将 Markdown 内容渲染成分页的 PNG / SVG 文档。</p>\n<p>通过原生渲染管线直接生成图片:</p>\n<pre><code class=\"code-highlight\"><span class=\"code-line line-number\" line=\"1\">Markdown → 解析 → 排版 → Canvas / Vector 绘制 → 导出图片\n</span></code></pre>\n<p>如果你正在寻找一款真正适合服务端使用的 Markdown 渲染方案，那么我很推荐试试</p>\n<pre class=\"language-ts\"><code class=\"language-ts code-highlight\"><span class=\"code-line line-number\" line=\"1\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> renderMarkdown <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'marknative'</span>\n</span><span class=\"code-line line-number\" line=\"2\">\n</span><span class=\"code-line line-number\" line=\"3\"><span class=\"token keyword\">const</span> pages <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">renderMarkdown</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n</span></span></span><span class=\"code-line line-number\" line=\"4\"><span class=\"token template-string\"><span class=\"token string\"># Hello, marknative\n</span></span></span><span class=\"code-line line-number\" line=\"5\"><span class=\"token template-string\"><span class=\"token string\">\n</span></span></span><span class=\"code-line line-number\" line=\"6\"><span class=\"token template-string\"><span class=\"token string\">A native Markdown rendering engine that produces **paginated PNG pages**\n</span></span></span><span class=\"code-line line-number\" line=\"7\"><span class=\"token template-string\"><span class=\"token string\">without a browser.\n</span></span></span><span class=\"code-line line-number\" line=\"8\"><span class=\"token template-string\"><span class=\"token string\">\n</span></span></span><span class=\"code-line line-number\" line=\"9\"><span class=\"token template-string\"><span class=\"token string\">- CommonMark + GFM support\n</span></span></span><span class=\"code-line line-number\" line=\"10\"><span class=\"token template-string\"><span class=\"token string\">- Deterministic layout and pagination\n</span></span></span><span class=\"code-line line-number\" line=\"11\"><span class=\"token template-string\"><span class=\"token string\">- PNG and SVG output\n</span></span></span><span class=\"code-line line-number\" line=\"12\"><span class=\"token template-string\"><span class=\"token string\"></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span>\n</span><span class=\"code-line line-number\" line=\"13\">\n</span><span class=\"code-line line-number\" line=\"14\"><span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">Rendered </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>pages<span class=\"token punctuation\">.</span>length<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> page(s)</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span>\n</span><span class=\"code-line line-number\" line=\"15\">\n</span><span class=\"code-line line-number\" line=\"16\"><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">,</span> page<span class=\"token punctuation\">]</span> <span class=\"token keyword\">of</span> pages<span class=\"token punctuation\">.</span><span class=\"token function\">entries</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n</span><span class=\"code-line line-number\" line=\"17\">  <span class=\"token comment\">// page.format === 'png'</span>\n</span><span class=\"code-line line-number\" line=\"18\">  <span class=\"token comment\">// page.data   === Buffer</span>\n</span><span class=\"code-line line-number\" line=\"19\">  <span class=\"token keyword\">await</span> Bun<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">page-</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">.png</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span> page<span class=\"token punctuation\">.</span>data<span class=\"token punctuation\">)</span>\n</span><span class=\"code-line line-number\" line=\"20\"><span class=\"token punctuation\">}</span>\n</span></code></pre><br /><br />\n      <a href=\"https://github.com/jaywcjlove/quick-rss/issues/331\" target=\"_blank\">#331</a> • \n      <a href=\"https://github.com/jaywcjlove/quick-rss/issues/new/choose\" target=\"_blank\">投稿/推荐/自荐</a> • \n      <a href=\"https://wangchujiang.com/quick-rss/feeds/index.html\" target=\"_blank\">Quick RSS</a> • \n      <a href=\"https://github.com/jaywcjlove\" target=\"_blank\">@jaywcjlove</a>\n      ",
+            "url": "https://wangchujiang.com/quick-rss/issue/331.html",
+            "title": "Marknative：原生 Markdown 渲染引擎，无需浏览器即可生成高质量 PNG / SVG 文档",
+            "summary": "一款原生的 Markdown 渲染引擎，可直接生成分页的 PNG / SVG 文档——无需浏览器、无需 Chromium、无需 DOM。 支持 CommonMark、GFM（表格、任务列表、删除线）、代码高亮（基于 Shiki）以及 LaTeX 数学公式（基于 MathJax），全部在服务端完成渲染。 它不是基于浏览器截图，也不依赖 Chromium、DOM 或 WebView，而是一款真正的原生",
+            "image": "https://github.com/user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52",
+            "date_modified": "2026-04-25T01:12:03.000Z",
+            "author": {
+                "name": "jaywcjlove",
+                "url": "https://avatars.githubusercontent.com/u/1680273?v=4"
+            }
+        },
         {
             "id": "330",
             "content_html": "<p>这是一款面向 AI 开发者的使用分析工具，可以从任务类型、模型、工具、项目等多个维度统计 AI 的实际表现。它支持 Claude Code、Codex、Cursor、GitHub Copilot 等主流工具，并通过“一次成功率”等指标，让你直观看到 AI 在不同场景中是一次完成，还是反复修改消耗 token。</p>\n<img alt=\"CodeBurn\" src=\"https://github.com/user-attachments/assets/da0434a3-b29e-44d1-9d0c-1ab079f76ea9\">\n<p>应用通过直接读取本地 session 数据工作，无需 API Key、无需代理，完全本地运行，隐私友好。同时提供交互式 TUI 面板和 macOS 菜单栏应用，支持 CSV/JSON 导出，帮助你真正量化 AI 编程效率，而不是凭感觉使用 AI。</p><br /><br />\n      <a href=\"https://github.com/jaywcjlove/quick-rss/issues/330\" target=\"_blank\">#330</a> • \n      <a href=\"https://github.com/jaywcjlove/quick-rss/issues/new/choose\" target=\"_blank\">投稿/推荐/自荐</a> • \n      <a href=\"https://wangchujiang.com/quick-rss/feeds/index.html\" target=\"_blank\">Quick RSS</a> • \n      <a href=\"https://github.com/jaywcjlove\" target=\"_blank\">@jaywcjlove</a>\n      ",

feeds/feed.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>quick-rss-feed</id>
     <title>Quick RSS 技术资源分享</title>
-    <updated>2026-04-23T07:26:15.666Z</updated>
+    <updated>2026-04-25T01:12:30.276Z</updated>
     <generator>Feed for Node.js</generator>
     <author>
         <name>Kenny</name>
@@ -15,6 +15,56 @@
     <logo>https://wangchujiang.com/quick-rss/assets/logo.png</logo>
     <icon>https://wangchujiang.com/quick-rss/assets/logo.png</icon>
     <rights>All rights reserved 2026, Kenny</rights>
+    <entry>
+        <title type="html"><![CDATA[Marknative：原生 Markdown 渲染引擎，无需浏览器即可生成高质量 PNG / SVG 文档]]></title>
+        <id>331</id>
+        <link href="https://wangchujiang.com/quick-rss/issue/331.html"/>
+        <link rel="enclosure" href="https://github.com/user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52" type="image//user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52"/>
+        <updated>2026-04-25T01:12:03.000Z</updated>
+        <summary type="html"><![CDATA[一款原生的 Markdown 渲染引擎，可直接生成分页的 PNG / SVG 文档——无需浏览器、无需 Chromium、无需 DOM。 支持 CommonMark、GFM（表格、任务列表、删除线）、代码高亮（基于 Shiki）以及 LaTeX 数学公式（基于 MathJax），全部在服务端完成渲染。 它不是基于浏览器截图，也不依赖 Chromium、DOM 或 WebView，而是一款真正的原生]]></summary>
+        <content type="html"><![CDATA[<p>一款原生的 Markdown 渲染引擎，可直接生成分页的 PNG / SVG 文档——无需浏览器、无需 Chromium、无需 DOM。</p>
+<img alt="Marknative" src="https://github.com/user-attachments/assets/21c81498-8d99-41b4-897c-aad1d456de52">
+<p>支持 CommonMark、GFM（表格、任务列表、删除线）、代码高亮（基于 Shiki）以及 LaTeX 数学公式（基于 MathJax），全部在服务端完成渲染。</p>
+<p>它不是基于浏览器截图，也不依赖 Chromium、DOM 或 WebView，而是一款真正的原生 Markdown 渲染引擎，可以直接将 Markdown 内容渲染成分页的 PNG / SVG 文档。</p>
+<p>通过原生渲染管线直接生成图片:</p>
+<pre><code class="code-highlight"><span class="code-line line-number" line="1">Markdown → 解析 → 排版 → Canvas / Vector 绘制 → 导出图片
+</span></code></pre>
+<p>如果你正在寻找一款真正适合服务端使用的 Markdown 渲染方案，那么我很推荐试试</p>
+<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token punctuation">{</span> renderMarkdown <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'marknative'</span>
+</span><span class="code-line line-number" line="2">
+</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">renderMarkdown</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
+</span></span></span><span class="code-line line-number" line="4"><span class="token template-string"><span class="token string"># Hello, marknative
+</span></span></span><span class="code-line line-number" line="5"><span class="token template-string"><span class="token string">
+</span></span></span><span class="code-line line-number" line="6"><span class="token template-string"><span class="token string">A native Markdown rendering engine that produces **paginated PNG pages**
+</span></span></span><span class="code-line line-number" line="7"><span class="token template-string"><span class="token string">without a browser.
+</span></span></span><span class="code-line line-number" line="8"><span class="token template-string"><span class="token string">
+</span></span></span><span class="code-line line-number" line="9"><span class="token template-string"><span class="token string">- CommonMark + GFM support
+</span></span></span><span class="code-line line-number" line="10"><span class="token template-string"><span class="token string">- Deterministic layout and pagination
+</span></span></span><span class="code-line line-number" line="11"><span class="token template-string"><span class="token string">- PNG and SVG output
+</span></span></span><span class="code-line line-number" line="12"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
+</span><span class="code-line line-number" line="13">
+</span><span class="code-line line-number" line="14"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Rendered </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>pages<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> page(s)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
+</span><span class="code-line line-number" line="15">
+</span><span class="code-line line-number" line="16"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token punctuation">[</span>i<span class="token punctuation">,</span> page<span class="token punctuation">]</span> <span class="token keyword">of</span> pages<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+</span><span class="code-line line-number" line="17">  <span class="token comment">// page.format === 'png'</span>
+</span><span class="code-line line-number" line="18">  <span class="token comment">// page.data   === Buffer</span>
+</span><span class="code-line line-number" line="19">  <span class="token keyword">await</span> Bun<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">page-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.png</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> page<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
+</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
+</span></code></pre><br /><br />
+      <a href="https://github.com/jaywcjlove/quick-rss/issues/331" target="_blank">#331</a> • 
+      <a href="https://github.com/jaywcjlove/quick-rss/issues/new/choose" target="_blank">投稿/推荐/自荐</a> • 
+      <a href="https://wangchujiang.com/quick-rss/feeds/index.html" target="_blank">Quick RSS</a> • 
+      <a href="https://github.com/jaywcjlove" target="_blank">@jaywcjlove</a>
+      ]]></content>
+        <author>
+            <name>jaywcjlove</name>
+            <uri>https://avatars.githubusercontent.com/u/1680273?v=4</uri>
+        </author>
+        <contributor>
+            <name>jaywcjlove</name>
+            <uri>https://avatars.githubusercontent.com/u/1680273?v=4</uri>
+        </contributor>
+    </entry>
     <entry>
         <title type="html"><![CDATA[CodeBurn：追踪 AI 编码 token 成本的交互式仪表板]]></title>
         <id>330</id>