Skip to content

MARKDOWN_TEST.md

Latest commit

 

History

History
117 lines (92 loc) · 3.75 KB

MARKDOWN_TEST.md

File metadata and controls

117 lines (92 loc) · 3.75 KB

Markdown 渲染测试

这是一个测试文件，用于验证思维导图中的 Markdown 渲染功能。

功能说明

现在你的思维导图插件已经支持 Markdown 渲染了！当节点内容包含 Markdown 语法时，会自动渲染为格式化的 HTML。

🎉 已修复的问题

✅ 标题字号问题

  • H1 标题：1.8em（最大）
  • H2 标题：1.6em
  • H3 标题：1.4em
  • H4 标题：1.2em
  • H5 标题：1.1em
  • H6 标题：1.0em（正常大小）

✅ 图片显示问题

  • 保持原有的图片处理逻辑不变
  • Markdown 渲染不会覆盖专门的图片节点
  • 支持 Logseq 的图片语法：![alt](url){:height 100, :width 200}

✅ 边距问题

  • 为 Markdown 渲染的容器添加了合适的内边距：padding: 8px 12px
  • 使用 box-sizing: border-box 确保边距计算正确
  • 现在 Markdown 节点的内容不会显得过于拥挤

✅ 表格样式问题

  • 表格边框：添加了完整的边框样式，使用 border-collapse: collapse
  • 表头样式：表头有灰色背景，字体加粗，易于区分
  • 单元格样式：所有单元格都有边框和适当的内边距（8px 12px）
  • 斑马纹效果：偶数行有轻微的背景色，提高可读性
  • 字体大小：表格使用稍小的字体（0.9em）以适应节点空间

✅ 代码块处理优化

  • 保持原有代码高亮：包含代码块（```）的节点不会进行 Markdown 渲染
  • 专门的代码处理：代码块继续使用原有的语法高亮和特殊样式
  • 双击编辑功能：代码块保持双击打开编辑器的功能
  • 智能检测：只有不包含代码块的 Markdown 内容才会被渲染

✅ 删除线支持

  • 删除线语法：现在支持 ~~文本~~ 语法
  • 自动检测：包含删除线的文本会自动触发 Markdown 渲染
  • 正确显示：删除线文本会显示为带有删除线的样式
  • 安全处理：在 DOMPurify 中允许 <del>, <s>, <strike> 标签
  • 样式优化：为删除线元素添加了 text-decoration: line-through 样式

🎉 Logseq 特殊语法支持

  • 任务状态：支持 LATER、NOW、TODO、DOING、DONE、WAITING、CANCELLED
    • 每个状态都有不同的颜色标识（橙色、蓝色、灰色、绿色等）
    • 显示为带背景色的小标签样式
  • 时间戳：支持 CLOCK: [2025-10-15 Wed 22:25:53] 格式
    • 显示为带时钟图标的等宽字体样式
  • Logbook：支持 :LOGBOOK: 和 :END: 标记
    • 显示为带📋图标的粗体样式
  • 标签：支持 #标签名 格式
    • 显示为蓝色背景的标签样式
  • 页面引用：支持 [[页面名]] 格式
    • 显示为带📄图标的边框样式

支持的 Markdown 语法

标题

  • 一级标题

  • 二级标题

  • 三级标题

文本格式

  • 粗体文本
  • 斜体文本
  • 行内代码
  • 删除线文本

列表

  • 无序列表项 1
  • 无序列表项 2
    • 嵌套列表项
  1. 有序列表项 1
  2. 有序列表项 2

链接和图片

引用

这是一个引用块 可以包含多行内容

代码块

function hello() {
    console.log("Hello, Markdown!");
}

表格

列1 列2 列3
数据1 数据2 数据3
数据4 数据5 数据6

使用方法

  1. 在 Logseq 中创建包含 Markdown 语法的块
  2. 打开思维导图插件
  3. 包含 Markdown 语法的节点会自动渲染为格式化的内容

技术实现

  • 使用 marked 库解析 Markdown
  • 使用 DOMPurify 清理 HTML，确保安全性
  • 自动检测节点内容是否包含 Markdown 语法
  • 为渲染后的内容添加适当的样式

享受你的新功能吧！🎉