HedgeDoc 快速上手：创建你的第一篇笔记，从新建到实时预览

后端前端云原生【免费下载链接】hedgedocHedgeDoc - Ideas grow better together项目地址https://gitcode.com/gh_mirrors/he/hedgedoc点击查看免费下载本教程面向 HedgeDoc 新手带你从访问实例首页开始一步步完成第一篇笔记的创建、编写与实时预览并解释点击 New Note 背后实际发生的调用链路。读完本文你将掌握 HedgeDoc 最基本的笔记工作流新建 → 编辑 → 预览并知道去哪里学习 HedgeDoc 特有的 Markdown 方言HFM与进阶配置。前置说明以md.example.com为例HedgeDoc 是一个自托管的开源协作笔记平台Ideas grow grow better together。本文以https://md.example.com作为你实例的访问域名示例实际操作时请把文中所有出现md.example.com的位置替换为你自己部署实例的真实域名。如果你还没有运行中的实例可以参照 安装教程 完成部署或直接使用社区/团队已经搭建好的 HedgeDoc 服务。第一步访问 HedgeDoc 首页打开浏览器访问https://md.example.com。首页会展示 HedgeDoc 的欢迎界面与实例的基础信息如版本、可用功能列表。这是你与 HedgeDoc 交互的起点绝大多数操作登录、新建笔记、浏览公开笔记、探索页面都从首页导航栏发起。顶部导航栏右侧的核心入口从左到右依次为帮助菜单、设置、New Note新建笔记与 Sign In登录按钮。第二步点击 New Note 创建笔记点击首页右上角的New Note按钮HedgeDoc 会立即为你创建一篇全新的笔记并将浏览器重定向到这篇笔记的编辑器页面。按钮背后的前端实现从前端源码看New Note 按钮由 new-note-button.tsx 组件渲染点击后调用createNote()创建空笔记随后通过路由跳转到新笔记createNote() .then((note) { router?.push(/n/${note.metadata.primaryAlias}) }) .catch((error: Error) { showErrorNotificationBuilder(error.message) })也就是说新建的笔记会获得一个primaryAlias主别名/标识符编辑器页面的 URL 形如/n/primaryAlias。点击后的重定向逻辑同样体现在 new/page.tsx/new/page.tsx) 中页面组件加载时调用createNote(newContent)成功后Redirect to{/n/${value.metadata.primaryAlias}} replace{true} /跳转过去。一个值得注意的细节如果实例配置为不允许游客完整访问guestAccess不等于PermissionLevel.FULL且当前用户未登录New Note 按钮会直接不渲染返回null。这意味着新建笔记往往需要先登录或由管理员开放游客写入权限。按钮背后的 API 与后端链路前端通过 api/notes/index.ts 中的createNote发起请求export const createNote async (markdown: string): PromiseNoteInterface { const response await new PostApiRequestBuilderNoteInterface, void(notes) .withHeader(Content-Type, text/markdown) .withBody(markdown) .sendRequest() return response.asParsedJsonObject() }请求以Content-Type: text/markdown将 Markdown 正文 POST 到notes接口后端对应 notes.controller.ts 中的createNote处理器最终由noteService.createNote(text, userId)落库并生成笔记 ID。因此从浏览器点击按钮到进入编辑器实质上是前端调 API → 后端创建笔记 → 返回元数据 → 前端跳转编辑器页的完整闭环响应中携带的metadata.primaryAlias就是这篇新笔记的访问路径标识。第三步认识编辑器——左侧写、右侧看进入编辑器后你会看到 HedgeDoc 最核心的左右分栏布局左侧1编辑区基于 CodeMirroruiw/react-codemirror实现的 Markdown 源码编辑器支持 Markdown 语法高亮、自动补全、拼写检查、行包裹、缩进辅助等能力具体扩展可在 editor-pane.tsx 及其hooks/codemirror-extensions目录中看到右侧2预览区实时渲染你输入的 Markdown 内容所见即所得无需手动刷新两个分栏之间的分隔条可以拖动调整宽度编辑器还提供同步滚动synced-scroll、目录table-of-contents等功能。新建笔记默认内容为空编辑区会显示一段引导占位文本大意是从输入标题开始预览区显示 Untitled。从这时起你在左侧输入的每一个字符都会实时反映在右侧渲染结果中。实时协作的底层机制可选了解HedgeDoc 的编辑器并不仅是本地编辑从源码结构看编辑区通过yjsYjs 协同库与后端建立实时连接editor-pane.tsx 中useCodeMirrorYjsExtension、useRealtimeConnection、useReceiveRealtimeUsers等 hooks支持多人同时编辑同一篇笔记、显示远程协作者的实时光标。也就是说你创建的第一篇笔记天然具备协作能力——把链接分享给同事你们就能在同一页面上共同编辑。第四步粘贴示例文本体验 HedgeDoc 的核心 Markdown 能力将下面这段文本复制到左侧编辑区观察右侧预览区的实时变化# My first note You can format text **bold** or *italic*. There are lists both 1. ordered and - unordered Also you can use - [ ] ToDo Lists这段示例覆盖了四类最常用的 Markdown 语法也是 HedgeDoc 新手最先用到的能力语法写法效果标题# My first note一级标题同时会成为笔记的标题预览区顶栏的 Untitled 会随之更新强调**bold**/*italic*加粗 / 斜体列表1. ordered/- unordered有序列表 / 无序列表任务清单- [ ] ToDo Lists可勾选的 ToDo 列表渲染后可直接勾选更多语法去哪学HedgeDoc Flavored MarkdownHedgeDoc 在 CommonMark 与 GitHub Flavored Markdown 的基础上定义了自己的方言称为HedgeDoc Flavored MarkdownHFM。上面示例中的加粗、斜体、标题、有序/无序列表、任务列表等能力在 HFM 中都有明确的支持矩阵此外 HFM 还扩展了下划线、删除线、上下标、高亮、定义列表、emoji、LaTeXKaTeX 渲染、脚注、目录、可折叠区块、Alerts 提醒等大量特性。完整的能力对照表含 HFM 1 与 HFM 2 对比、各特性的支持情况可以参考 HedgeDoc Flavored Markdown 语法参考。进阶第一篇笔记之后完成第一篇笔记后你可以按需继续深入创建你的第一个演示文稿HedgeDoc 支持用 Markdown 直接编写幻灯片基于 reveal.js 渲染适合技术分享与课程演示HedgeDoc 配置参考了解实例级别的进阶配置选项媒体存储、认证方式、CSP、限流、自定义品牌等适用于实例管理员与高级用户回到 教程总览 浏览全部上手教程包括实例安装、创建用户等更多主题。至此你已经走通了 HedgeDoc 最基本也最核心的闭环进入实例 → 新建笔记 → 双栏编辑与实时预览 → 掌握基础 Markdown 语法。接下来无论是写会议纪要、个人知识库还是团队协作文档都可以在此基础上自由发挥。赞分享后端前端云原生【免费下载链接】hedgedocHedgeDoc - Ideas grow better together项目地址https://gitcode.com/gh_mirrors/he/hedgedoc点击查看免费下载相关推荐Fast3R在计算机视觉领域的应用前景与未来展望Fast3R在计算机视觉领域的应用前景与未来展望 Fast3R作为CVPR 2025的创新研究成果实现了在单次前向传播中完成1000图像的3D重建为计算机VuePress 快速上手从零搭建你的第一篇静态文档站点VuePress 快速上手从零搭建你的第一篇静态文档站点 VuePress 是一个由 Vue 驱动的极简静态站点生成器它让用 Markdown 写文档、用前端文档SSR10分钟上手open-notebook从安装到创建第一个智能笔记本10分钟上手open notebook从安装到创建第一个智能笔记本 你是否还在为管理海量研究资料而烦恼是否希望有一个智能助手能帮你梳理信息、提炼观点ope人工智能AI 应用RAG后端前端上一篇Caffeine 的 Gradle 构建体系实战解读缓存可重定位性、Central 发布流水线与构建性能优化下一篇3步打造你的终极音乐播放器用foobox-cn告别foobar2000的单调界面创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考