流光筆記

流光筆記

Markdown編輯器瀏覽器擴充功能AI助手與網頁剪藏Mermaid與KaTeX知識庫與書籍
版本:v1.0

更新時間: 2026-10-09

你只管寫,剩下的交給我。

側邊欄 Markdown 專注創作,所見即所得,圖表公式信手拈來;日常思考自動沉澱為專欄、彙編成書;最終皆能一鍵直通靜態部落格,寫完即發布。

每一道流光,都替你安放成章。

⚡ FlashNote 1.0 核心特性

FlashNote (流光筆記) 是一款專為極客、寫作者、技術博主與學者打造的跨瀏覽器現代化側邊欄創作工作台。無論是捕捉稍縱即逝的靈感火花,還是編排結構嚴謹的長篇技術專著,FlashNote 都能為您帶來極致流暢、無拘無束的寫作體驗。


🌟 核心功能一覽

1. 📂 雙軌創作系統:速記與專欄各得其所

  • 獨立速記 (Notes):
    • 毫秒級極速靈感記錄,支援置頂、收藏與物理目錄歸類;
    • 懸浮抽屜式列表面板,支援側邊欄常駐固定與自動隱藏,狀態持久化記憶。
  • 書籍專欄 (Books):
    • 樹形章節目錄大綱編排,支援拖拽重構章節層級與順序;
    • 配套整書連續沉浸式閱讀器,無斷點連續通讀整部大作。

2. ✍️ 工業級 Tiptap 所見即所得編輯器

  • 4 種自由切換的視界:
    • 🎨 可視化模式 (Visual):所見即所得富文本交互,支援任務清單、層級標題、表格等;
    • 📑 雙欄對照模式 (Split):左側富文本編輯,右側同步純文本源碼對照;
    • 📝 Markdown 源碼模式 (Source):純文本 Markdown 敲擊體驗,保持原汁原味極客習慣;
    • 🌐 純網頁預覽模式 (Preview):模擬最終排版,超連結安全可直接點擊跳轉。
  • 精細排版與輸入優化:
    • 代碼塊內建灰色不可複製行號與右上角一鍵复制代码;
    • 覆蓋上百種編程語言與標記語言分類語法高亮;
    • 滾動比例(ScrollRatio)自動持久化記憶與精準百分比復原。

3. 📐 KaTeX LaTeX 數學公式即時引擎

  • 原生支援行內數學公式($E=mc^2$)與多行塊級數學公式($$\int_0^\infty e^{-x^2} dx$$);
  • 配套專用公式輸入彈窗,常用數學符號快捷輸入,毫秒級即時渲染預覽。

4. 📊 Mermaid 互動圖表全功能套件

  • 流程圖、時序圖、類圖、狀態圖等即寫即渲染;
  • 手勢拖拽平移:鼠標懸停自動呈現手掌光標,按住左鍵自由平移,雙擊畫布立即居中復位;
  • 全屏沉浸燈箱:一鍵喚起 94vw × 88vh 巨幅大圖彈窗,支援 30%~350% 無級大比例縮放;
  • 雙格式按需導出:一鍵導出無損向量 SVG 與 2x 視網膜高清 PNG,配備 24px 呼吸留白與純白底板,並自動生成語義化文件名。

5. 🚀 部落格直通 (Blog Direct):打造 MagicNote 靜態站專用編輯器

  • 化身靜態部落格生產力利器:
    • 傳統基於 Git 與本地 Markdown 文件的靜態部落格(如 VitePress、Astro)長期面臨「缺乏輕量便捷的可視化編輯器」、「插入配圖與技術圖表繁瑣」、「離開電腦無法隨手寫作」等痛點;
    • FlashNote 深度結合個人開源部落格主題 MagicNote (FisherMS/magicnote),原生將瀏覽器側邊欄蛻變為靜態部落格專屬的沉浸式 WYSIWYG 可視化編輯器。
  • 零配置自動化 FrontMatter 注入:
    • 每篇筆記自動編譯注入符合 MagicNote / 靜態部落格規範的標準 YAML 元數據頭;
    • 自動管理 title(標題)、date(智能防時區漂移發佈時間)、category(業務分類)、tags(標籤陣列)、order(📌 加權置頂權重)與 description(支援富文本/Markdown 渲染的導讀摘要)。
  • 規範化工程目錄結構輸出:
    • 嚴格解耦物理目錄 folder 與業務標籤 category,自動編譯生成標準的 posts/{folder}/{slug}.md 樹狀資產結構;
    • 伴生插圖與導出的 Mermaid 架構圖自動按規範就地歸檔,遵循靜態站點「公共全局資源與博主內容資產嚴格權責隔離」的工程準則。
  • 全鏈路極速發佈閉環:
    • 側邊欄沉浸速記 -> 富文本/源碼隨心排版 -> 部落格直通一鍵編譯同步 -> 觸發 CI/CD 自動化構建,真正打通「寫完即發佈」的現代化極速創作流。

6. ☁️ 數據自持:百度網盤分卷差量同步

  • 獨創分卷切片與雜湊指紋校驗引擎,只上傳變動章節,告別大文件上傳超時;
  • 同步時自動在雲端彙編生成單體長篇完整電子書 ${safeBookName}.md(含自動目錄錨點)與開源規範 SUMMARY.md。

7. 🤖 端雲兼備的 AI 創作助手 (AI Assistant)

  • 多級大模型編排:原生支援 Chrome 內建端側 AI (Gemini Nano / Prompt API) 本地離線推理,同時兼容 Google Gemini API (Gemini 1.5/2.0 Flash) 與 OpenAI 相容協議;
  • 沉浸式交互體驗:提供獨立可拖拽、自由縮放尺寸的浮動助手面板,隨心移動不遮擋排版正文;
  • 開箱即用寫作指令:內建一鍵文本潤色、語法校對、多語言學術翻譯、文章智能總結、大綱擴寫與自由自訂提示詞。

8. 🌐 全局智能網頁剪藏與靈感捕獲 (Web Clipper)

  • 多維上下文捕獲:瀏覽任意網頁時,通過右鍵選單一鍵快速剪藏網頁正文全文、選中文本片段、超連結或配圖;
  • 輕量原生動態氣泡 (Web Toast):網頁右上角極簡動效保存反饋氣泡,無需依賴系統通知權限即可確認剪藏狀態;
  • 溯源與側邊欄聯動:自動捕獲網頁標題與原始 URL 引用,支援保存後自動呼出側邊欄並高亮新筆記。

9. 🗄️ OPFS 高性能原生物理存儲

  • 採用現代瀏覽器 Origin Private File System (OPFS) 規範,在本地高速隔離存儲筆記配圖與多媒體資產;
  • 筆記刪除時自動觸發資產級聯徹底清理,告別本地無用快取冗餘。

10. 📊 透明受控的 Google Analytics 4 匿名產品分析

  • 基於 Google Analytics 4 Measurement Protocol 收集冷啟動耗時、功能採納頻次等匿名聚合指標,零業務侵入;
  • 嚴格遵循零 PII 原則,絕不採集筆記正文與個人資訊,且在【設定】中提供一鍵關閉開關,把控制權完全還給用戶。

11. 🎯 貼心打磨的現代交互細節

  • 自適應折疊工具列:基於 ResizeObserver 動態感應寬度,寬屏單行、窄屏自適應折行,杜絕橫向滾動條;
  • 50ms 極速微動效氣泡:懸浮瞬間彈出精緻 Tooltip,交互輕快靈動;
  • 四國多語言即時熱切換:簡體中文、繁體中文、English、日本語點擊即換。