Yank Note：重新定义Markdown编辑体验的开源神器

Yank Note：重新定义Markdown编辑体验的开源神器

【免费下载链接】yn A highly extensible Markdown editor. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, Reveal.js, plug-in, and macro replacement. 项目地址: https://gitcode.com/GitHub_Trending/yn/yn

Yank Note是一款基于Electron + Vue 3技术栈构建的现代化Markdown编辑器，深度集成Monaco Editor（VS Code编辑器内核），提供专业的代码编辑体验。它具备强大的Markdown增强功能、嵌入式图表渲染、代码执行引擎、文档加密安全、插件扩展系统和本地版本控制等核心特性，重新定义了Markdown编辑的生产力标准。

Yank Note项目概述与核心特性

Yank Note是一款专为生产力而设计的高度可扩展Markdown编辑器，它重新定义了现代Markdown编辑体验。作为一款开源工具，Yank Note不仅提供了流畅的编辑环境，更通过丰富的功能集满足了从基础写作到复杂技术文档的各种需求。

项目架构与技术栈

Yank Note基于现代化的技术栈构建，采用Electron框架实现跨平台桌面应用，核心编辑器使用Monaco Editor（VS Code的编辑器内核），确保了与VS Code一致的编辑体验。前端采用Vue 3组合式API架构，TypeScript提供类型安全，构建工具使用Vite实现快速开发体验。

核心特性详解

1. 强大的Markdown增强功能

Yank Note在标准Markdown语法基础上进行了深度扩展，支持丰富的增强功能：

==高亮文本==
H~2~O 下标和 29^th^ 上标
脚注引用[^1]
:smile: Emoji表情
[[交叉文档链接]]
#标签系统

表格功能支持高级特性：

功能	描述	示例
多行文本	单元格内支持多行内容	第一行 第二行
列表嵌入	单元格内嵌入待办列表	- [ ] 任务1 - [x] 任务2
单元格合并	支持行列合并	{colspan=2} {rowspan=2}
样式定制	自定义单元格样式	{style="color:red"}

2. 嵌入式图表与图形渲染

Yank Note集成了多种图表引擎，支持直接在文档中嵌入动态图形：

Mermaid集成示例：

![mermaid](https://web-api.gitcode.com/mermaid/svg/eNorTi0sTc1LTnXJTEwvSszlUgCC51NWPOvYrmtnF5mYl63gl1-SaqXwfM-0F_smPpvW_mzhYrAiuBxQnW9qUW5iZoqVwrMdm57Nn_x09r4XC1eAVUFldFENe7F_ytPZ84LD3IEqn-5dhGEexAFA42bse75k18tFLS-WdwAAy3ZLiA)

3. 代码执行与终端集成

Yank Note内置代码执行引擎，支持多种编程语言的即时运行：

语言	执行环境	特性
JavaScript	Node.js / 浏览器	支持ES模块和CommonJS
Python	Python解释器	需要系统安装Python
Bash/Shell	系统终端	支持Linux/macOS/Windows
PHP	PHP解释器	需要系统安装PHP
Batch	CMD终端	Windows批处理脚本

代码执行示例：

```js
// --run--
console.log('Hello Yank Note!')
const result = 2 + 3
console.log(`计算结果: ${result}`)
```

4. 文档加密与安全特性

Yank Note提供文件级加密保护，确保敏感信息的安全：

加密特性：

• 使用前端加密技术，密码不传输到服务器
• 每个文件可单独设置密码
• 支持AES加密算法
• 加密文件扩展名为 .c.md

5. 插件系统与扩展能力

Yank Note的插件架构允许开发者深度定制编辑器功能：

// 插件示例结构
interface YankNotePlugin {
  name: string
  description: string
  setup: (ctx: PluginContext) => void
  onActivate?: () => void
  onDeactivate?: () => void
}

插件可以访问的核心API包括：

• 编辑器实例操作
• 文件系统访问
• 配置管理
• 事件订阅系统
• UI组件注册

6. 版本控制与历史管理

Yank Note内置完善的版本控制系统：

7. 多格式导出与发布

支持将文档导出为多种格式：

导出格式	使用技术	特性
HTML	内置渲染器	保持所有样式和交互
PDF	浏览器打印	支持分页和打印优化
DOCX	Pandoc转换	兼容Microsoft Word
Markdown	原始格式	保持源文件完整性
纯文本	文本提取	仅保留文字内容

技术实现亮点

Yank Note在技术实现上具有多个创新点：

1. Monaco编辑器深度定制：基于VS Code编辑器内核，提供智能提示、语法高亮、代码折叠等专业功能。

2. 模块化架构设计：采用依赖注入和控制反转模式，确保代码的可维护性和可测试性。

3. 异步处理优化：大量使用Promise和async/await处理文件IO和网络请求，确保界面流畅。

4. 内存管理机制：采用虚拟DOM和懒加载技术，优化大型文档的处理性能。

5. 跨平台兼容性：基于Electron实现真正的跨平台支持，在Windows、macOS、Linux上提供一致体验。

Yank Note通过这些核心特性的有机结合，为Markdown编辑提供了前所未有的强大功能和灵活性，使其成为技术写作、知识管理和文档编写的理想选择。

Electron + Vue技术架构解析

Yank Note作为一款现代化的Markdown编辑器，采用了Electron + Vue 3的技术架构，完美结合了桌面应用的强大功能和Web技术的灵活性。这种架构选择使得Yank Note能够在保持跨平台兼容性的同时，提供接近原生应用的性能和用户体验。

架构概览与核心组件

Yank Note的架构采用了典型的多进程模型，将主进程（Main Process）和渲染进程（Renderer Process）清晰分离，通过进程间通信（IPC）机制实现高效的数据交换和功能调用。

主进程架构设计

主进程作为应用的核心，负责管理整个应用的生命周期和系统级功能。从src/main/app.ts可以看到其精心设计的架构：

// 主进程入口文件结构
import { app, BrowserWindow, Menu, Tray, protocol } from 'electron'
import * as path from 'path'
import * as fs from 'fs-extra'

// 核心功能模块
import httpServer from './server'          // HTTP服务器
import store from './storage'              // 数据存储
import { initProxy } from './proxy'        // 代理配置
import { registerAction } from './action'  // 动作注册
import { initJSONRPCClient } from './jsonrpc' // JSON-RPC客户端

主进程的主要职责包括：

功能模块	职责描述	实现文件
窗口管理	创建和管理主窗口，处理窗口状态	app.ts
菜单系统	构建应用菜单和上下文菜单	menus.ts
系统托盘	实现托盘图标和功能	app.ts
协议处理	注册自定义协议处理	protocol.ts
数据存储	使用electron-store管理配置	storage.ts
进程通信	通过IPC与渲染进程通信	jsonrpc.ts

渲染进程与Vue 3集成

渲染进程基于Vue 3构建，采用了现代化的Composition API和TypeScript，提供了响应式的用户界面和丰富的交互功能。

// 渲染进程架构示例
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './Main.vue'

// 核心服务注入
import { setupI18n } from './services/i18n'
import { setupTheme } from './services/theme'
import { setupEditor } from './services/editor'
import { setupRunner } from './services/runner'

const app = createApp(App)
const pinia = createPinia()

// 依赖注入配置
app.use(pinia)
setupI18n(app)
setupTheme(app)
setupEditor(app)
setupRunner(app)

app.mount('#app')

进程间通信机制

Yank Note采用了多种IPC通信模式，确保主进程和渲染进程之间的高效数据交换：

模块化服务架构

Yank Note采用了高度模块化的服务架构，每个功能模块都通过依赖注入的方式组织：

// 服务层架构示例
export interface EditorService {
  openFile(path: string): Promise<void>
  saveFile(content: string): Promise<void>
  getCurrentContent(): string
}

export interface ThemeService {
  switchTheme(theme: 'light' | 'dark'): void
  getCurrentTheme(): string
}

export interface I18nService {
  t(key: string): string
  changeLanguage(lang: string): void
}

性能优化策略

为了确保应用的流畅运行，Yank Note实施了多项性能优化措施：

1. 懒加载机制：插件和大型组件按需加载
2. 虚拟滚动：大文档编辑时的性能优化
3. 内存管理：及时释放不再使用的资源
4. 进程隔离：将耗时操作放在主进程或Worker中

安全架构设计

考虑到Markdown编辑器需要处理用户文件，安全架构尤为重要：

扩展性架构

Yank Note的插件系统采用了灵活的架构设计，支持动态加载和卸载：

// 插件系统架构
interface Plugin {
  name: string
  version: string
  activate(ctx: PluginContext): void
  deactivate?(): void
}

interface PluginContext {
  registerCommand(command: Command): void
  registerMenu(menu: MenuItem): void
  registerKeybinding(keybinding: Keybinding): void
}

这种架构使得开发者可以轻松扩展编辑器的功能，同时保持核心代码的稳定性。

构建与部署架构

项目采用现代化的构建工具链，确保开发和生产环境的一致性：

# 开发构建
npm run dev        # 启动开发服务器
npm run build:fe   # 构建前端资源
npm run build:main # 构建主进程

# 生产构建
npm run build      # 完整构建
electron-builder   # 打包分发

通过Electron + Vue 3的技术架构，Yank Note成功实现了功能丰富、性能优异、扩展性强的Markdown编辑器，为开发者提供了优秀的编辑体验。

Monaco编辑器内核深度集成

Yank Note 作为一款现代化的 Markdown 编辑器，其核心编辑体验建立在微软开源的 Monaco Editor 之上。Monaco Editor 是 Visual Studio Code 的编辑器内核，Yank Note 通过深度集成和定制化开发，为 Markdown 编辑带来了专业级的代码编辑体验。

编辑器架构设计

Yank Note 的 Monaco 编辑器集成采用了模块化的架构设计，通过 Vue 组件封装和 TypeScript 类型系统，实现了高度可维护的编辑器集成方案。

核心配置与定制

Yank Note 为 Monaco 编辑器提供了丰富的配置选项，通过 getDefaultOptions() 函数返回完整的编辑器配置对象：

export const getDefaultOptions = (): Monaco.editor.IStandaloneEditorConstructionOptions => ({
  value: '',
  accessibilitySupport: 'off', // 防止输入法闪烁
  theme: getColorScheme() === 'dark' ? 'vs-dark' : 'vs',
  fontSize: getSetting('editor.font-size', 16),
  wordWrap: store.state.wordWrap,
  links: !isElectron,
  mouseWheelZoom: getSetting('editor.mouse-wheel-zoom', true),
  wrappingIndent: getSetting('editor.wrap-indent', 'same'),
  smoothScrolling: true,
  cursorBlinking: 'smooth',
  fontFamily: getFontFamily(),
  detectIndentation: false,
  insertSpaces: true,
  tabSize: getSetting('editor.tab-size', 4),
  lineNumbers: getSetting('editor.line-numbers', 'on'),
  quickSuggestions: getSetting('editor.quick-suggestions', false),
  suggestOnTriggerCharacters: getSetting('editor.suggest-on-trigger-characters', true),
  occurrencesHighlight: 'off',
  renderLineHighlight: 'all',
  stickyScroll: { enabled: getSetting('editor.sticky-scroll-enabled', true) },
  fontLigatures: getSetting('editor.font-ligatures', false),
  rulers: getSetting('editor.rulers', '').split(',').filter(Boolean).map(Number),
  mouseWheelScrollSensitivity: getSetting('editor.mouse-wheel-scroll-sensitivity', 1.0),
})

多语言支持机制

Yank Note 支持多语言界面，通过配置 AMD Loader 实现 Monaco 编辑器的本地化：

function onGotAmdLoader () {
  if (props.nls && Object.keys(MONACO_EDITOR_NLS).includes(props.nls)) {
    (window as any).require.config({
      'vs/nls': {
        availableLanguages: {
          '*': props.nls,
        }
      }
    })
  }
  (window as any).require(['vs/editor/editor.main'], initMonaco)
}

编辑器服务API

Yank Note 提供了丰富的编辑器操作API，方便插件和内部功能调用：

API方法	功能描述	参数说明
getMonaco()	获取Monaco实例	无参数
getEditor()	获取编辑器实例	无参数
whenEditorReady()	等待编辑器就绪	返回Promise
insert(text)	在当前光标插入文本	text: 要插入的文本
insertAt(position, text)	在指定位置插入文本	position: 位置对象, text: 文本
replaceLine(line, text)	替换整行内容	line: 行号, text: 新内容
highlightLine(line, reveal, duration)	高亮显示行	line: 行号或范围, reveal: 是否滚动到视图, duration: 高亮持续时间

Markdown语言特性增强

Yank Note 对 Monaco 的 Markdown 语言支持进行了深度定制：

// 注册Markdown语言特性
monaco.languages.setMonarchTokensProvider('markdown', getMarkdownMonarchLanguage())

// 自定义Markdown语法高亮
const refreshMarkdownMonarchLanguageDebounce = debounce(() => {
  whenEditorReady().then(({ monaco }) => {
    monaco.languages.setMonarchTokensProvider('markdown', getMarkdownMonarchLanguage())
  })
}, 100)

主题与样式定制

Yank Note 提供了完整的主题系统，支持亮色和暗色主题，并针对 Markdown 编辑进行了优化：

.monaco-editor .inputarea {
  display: unset;
  box-sizing: content-box;
  background: unset;
  transition: none;
}

.monaco-editor .margin-view-overlays {
  user-select: none;
}

.monaco-editor a:hover {
  text-decoration: unset;
}

.editor .monaco-editor .suggest-widget {
  background-color: rgba(var(--g-color-98-rgb), 0.6);
  backdrop-filter: var(--g-backdrop-filter);
  border-radius: var(--g-border-radius);
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
}

插件系统集成

Monaco 编辑器与 Yank Note 的插件系统深度集成，支持插件注册自定义功能：

// 插件可以监听编辑器事件
registerHook('MONACO_BEFORE_INIT', { monaco: getMonaco() })
registerHook('MONACO_READY', { editor: getEditor(), monaco: getMonaco() })
registerHook('EDITOR_READY', resolve, true)

// AI Copilot插件示例
ctx.editor.whenEditorReady().then(({ monaco }) => {
  monaco.languages.registerCodeActionProvider('*', {
    provideCodeActions: function (model, range, context, token) {
      // 提供AI代码建议
    }
  })
})

性能优化策略

Yank Note 在 Monaco 编辑器集成中采用了多项性能优化措施：

1. 延迟加载: 使用 AMD Loader 动态加载 Monaco 编辑器资源
2. 防抖处理: 对语法高亮刷新等操作进行防抖处理
3. 内存管理: 合理管理编辑器模型的生命周期
4. 渲染优化: 针对不同场景配置不同的渲染选项

跨平台兼容性

通过细致的平台检测和配置，Yank Note 确保 Monaco 编辑器在不同平台上的一致性体验：

export function getFontFamily () {
  const customFontFamily = getSetting('editor.font-family')?.trim()
  
  if (isMacOS) {
    if (customFontFamily) {
      return `MacEmoji, ${customFontFamily}` // macOS添加表情符号字体支持
    }
    return DEFAULT_MAC_FONT_FAMILY
  }
  
  return customFontFamily || undefined // 其他平台使用Monaco默认字体
}

Monaco 编辑器的深度集成为 Yank Note 提供了强大的编辑基础，使得这款 Markdown 编辑器不仅具备优秀的文本编辑能力，还继承了 VS Code 的诸多先进特性，为开发者提供了熟悉而高效的编辑环境。

本地文件存储与版本控制机制

Yank Note采用了一种创新而高效的本地文件存储与版本控制机制，为Markdown文档提供了强大的历史版本管理能力。这一机制的设计充分考虑了性能、可靠性和用户体验，让用户能够安心地进行文档编辑，无需担心意外修改导致的内容丢失。

文件存储架构

Yank Note的文件存储系统基于本地文件系统，采用多仓库管理模式，每个仓库对应一个本地目录。这种设计使得文档管理更加灵活，用户可以根据项目或分类需求创建不同的仓库。

文件存储的核心特点包括：

• 原生文件格式：所有文档以标准Markdown格式（.md）或加密Markdown格式（.c.md）保存，确保与其他编辑器的兼容性
• 实时自动保存：默认2秒自动保存间隔，用户可自定义保存频率（支持禁用、2s、4s、8s、30s、60s等多种选项）
• 文件哈希校验：每次保存时生成MD5哈希值，防止文件冲突和数据损坏
• 跨平台兼容：支持Windows、macOS、Linux系统，文件路径处理兼容不同操作系统

版本控制实现原理

Yank Note的版本控制系统采用基于ZIP压缩的增量存储方案，每个文档的历史版本都独立存储在一个专用的压缩文件中。

版本存储结构

版本控制的具体实现机制：

1. 版本文件命名：每个文档的历史版本文件使用{原文件名}.{MD5哈希}.zip的命名规则，确保唯一性
2. 双层压缩结构：外层ZIP包含一个versions.zip文件，内层存储所有历史版本，这种设计优化了大规模版本的管理效率
3. 时间戳命名：每个版本以YYYY-MM-DD HH-mm-ss.md格式命名，便于时间排序和检索
4. 智能存储策略：使用存储模式（而非压缩模式）保存版本，减少CPU开销，提高写入性能

版本管理配置

用户可以通过设置界面灵活配置版本控制行为：

配置项	默认值	可选值	说明
历史版本数量限制	500	0,10,20,50,100,200,500,1000	控制每个文档保存的历史版本数量，0表示禁用版本控制
大文件处理	自动跳过	-	超过100KB的文档不保存历史版本，避免性能问题
存储空间管理	5MB限制	-	单个历史文件超过5MB时自动清理未标记的旧版本

历史版本操作API

Yank Note提供了一套完整的RESTful API用于历史版本管理：

// 获取历史版本列表
async function fetchHistoryList(file: PathItem): Promise<{
  size: number, 
  list: {name: string, comment: string}[]
}>

// 获取特定版本内容  
async function fetchHistoryContent(file: PathItem, version: string): Promise<string>

// 删除历史版本
async function deleteHistoryVersion(file: PathItem, version: string)

// 添加版本注释
async function commentHistoryVersion(file: PathItem, version: string, msg: string)

高级功能特性

1. 智能版本清理

系统采用智能清理策略，当历史文件大小超过5MB时：

• 优先保留带有注释的标记版本
• 自动删除未标记的旧版本，保留数量限制在总版本数的2/3
• 确保重要版本不被意外删除

2. 加密文档支持

加密文档（.c.md）的历史版本同样受到保护：

• 版本内容保持加密状态
• 只有通过正确密码验证后才能访问历史版本
• 加密算法与主文档保持一致

3. 文件操作同步

文件重命名或移动时，历史版本文件会自动同步：

• 使用相同的哈希算法生成新的历史文件名
• 原有历史数据完整迁移
• 确保版本历史的连续性

4. 性能优化措施

为了避免影响编辑体验，版本控制系统实施了多项优化：

• 异步写入：版本保存操作在后台线程执行，不阻塞主线程
• 延迟处理：文件保存后延迟执行版本记录，避免频繁操作
• 大小限制：超过100KB的文档不记录历史，平衡功能与性能

使用示例

通过Yank Note的图形界面，用户可以方便地：

1. 查看版本历史：通过快捷键或右键菜单打开版本历史面板
2. 版本对比：支持并排显示当前内容与历史版本的差异
3. 版本恢复：一键恢复到任意历史版本
4. 版本标记：为重要版本添加注释，便于后续查找
5. 批量管理：支持清理所有未标记的历史版本

技术实现细节

底层实现基于以下关键技术：

• AdmZip库：处理ZIP文件的创建、读取和修改
• 文件系统监控：实时监测文件变化，触发版本记录
• 哈希校验：确保文件完整性和版本一致性
• 异步编程：所有IO操作采用异步模式，保证界面流畅性

这种本地文件存储与版本控制机制的结合，使得Yank Note既保持了Markdown文件的纯文本特性，又提供了类似Git的版本管理功能，为用户提供了安全可靠的文档编辑环境。

总结

Yank Note通过创新的技术架构和丰富的功能集，成功打造了一款既保持Markdown文件纯文本特性，又提供类似Git版本管理功能的开源编辑器。其本地文件存储与版本控制机制采用基于ZIP压缩的增量存储方案，支持智能版本清理、加密文档保护和性能优化，为用户提供了安全可靠的文档编辑环境。结合强大的Monaco编辑器内核和Electron跨平台能力，Yank Note成为技术写作、知识管理和文档编写的理想选择，真正重新定义了现代Markdown编辑体验。

【免费下载链接】yn A highly extensible Markdown editor. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, Reveal.js, plug-in, and macro replacement. 项目地址: https://gitcode.com/GitHub_Trending/yn/yn