告别拥挤排版：Zotero-Better-Notes行高自定义全指南

你是否也曾在长时间阅读Zotero笔记时感到眼部疲劳？密密麻麻的文字挤在一起，段落间几乎没有呼吸空间——这可能不是你的阅读习惯问题，而是笔记默认行高（Line Height）设置不合理导致的。行高（行间距）作为影响阅读体验的核心因素，直接决定了文字的易读性和视觉舒适度。本文将带你通过简单的CSS自定义，调整Zotero-Better-Notes的行高设置，让长篇笔记阅读不再成为负担。

行高调整的核心原理

行高指的是文本行之间的垂直距离，通常以当前字体大小的倍数表示（如1.5倍行高）。GitHub Markdown标准样式中定义了基础行高为1.5，这是兼顾可读性与空间效率的平衡点。但在学术写作场景下，面对大量文献摘录和批注，适当增大行高（如1.6-1.8）能显著降低视觉疲劳。

Zotero-Better-Notes的笔记渲染主要依赖以下CSS文件：

• github-markdown.css：控制Markdown内容的基础样式
• editor.css：编辑器特有样式覆盖
• templateEditor.css：模板编辑区域样式

三种行高调整方案

方案1：全局基础行高修改（推荐）

通过修改GitHub Markdown基础样式，实现所有笔记的行高统一调整：

1. 定位到核心样式文件：addon/chrome/content/lib/css/github-markdown.css
2. 找到第157行的.markdown-body选择器定义：

   .markdown-body {
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     margin: 0;
     color: var(--color-fg-default);
     background-color: var(--color-canvas-default);
     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
     font-size: 16px;
     line-height: 1.5;
     word-wrap: break-word;
   }
   

3. 将line-height: 1.5;调整为个人舒适值，如1.65：

   line-height: 1.65;
   

此修改会影响所有使用Markdown渲染的内容，包括笔记正文、预览和导出文档，是最彻底的行高调整方案。

方案2：编辑器特定行高设置

如果希望仅在编辑界面调整行高，保持导出格式不变，可修改编辑器专用样式：

1. 打开编辑器样式文件：addon/chrome/content/styles/editor.css
2. 添加或修改编辑器内容区域样式：

   .ProseMirror-content {
     line-height: 1.7 !important; /* 使用!important确保优先级 */
     padding: 1rem;
   }
   

该方案的优势是保持笔记数据与导出格式的原始性，仅优化编辑体验。其中.ProseMirror-content是编辑器内容区域的核心CSS类，直接控制编辑时的文本布局。

方案3：模板级行高定制

对于需要按笔记类型差异化设置行高的场景（如文献笔记用1.8倍行高，草稿用1.4倍），可通过模板系统实现：

1. 打开模板编辑器样式文件：addon/chrome/content/styles/templateEditor.css
2. 第102行默认定义了模板编辑区域的行高：

   line-height: 1.272727273;
   

3. 为不同模板类型创建专用类：

   .template-literature .markdown-body {
     line-height: 1.8;
   }
   .template-draft .markdown-body {
     line-height: 1.4;
   }
   

通过模板系统应用不同行高类，实现笔记类型化管理。模板功能详情可参考官方文档：docs/about-note-template.md

行高推荐配置与效果对比

不同场景下的行高推荐值：

使用场景	推荐行高	适用范围
长时间阅读	1.6-1.8	文献笔记、长篇综述
快速浏览	1.4-1.5	提纲、待办清单
密集排版	1.3以下	代码块、引用摘录（特殊场景）

注：上图为不同行高效果对比示意图，实际效果取决于字体大小与屏幕分辨率

进阶技巧：动态行高调整

对于希望根据内容自动调整行高的高级用户，可结合CSS变量与JavaScript实现动态控制：

1. 在github-markdown.css中定义CSS变量：

   :root {
     --custom-line-height: 1.5;
   }
   .markdown-body {
     line-height: var(--custom-line-height);
   }
   

2. 通过自定义脚本修改变量值（需Zotero插件开发基础）：

   // 示例：根据笔记长度自动调整行高
   const noteLength = document.querySelector('.markdown-body').textContent.length;
   document.documentElement.style.setProperty('--custom-line-height', 
     noteLength > 5000 ? '1.7' : '1.5');
   

该方法需要一定技术基础，适合对Zotero插件开发感兴趣的用户探索。相关API可参考项目源码：src/extras/editorScript.ts

注意事项与最佳实践

1. 备份原始CSS文件：修改前建议备份github-markdown.css等核心样式文件，避免升级插件时丢失自定义设置。

2. 避免过度设置：行高并非越大越好，超过2.0会导致页面松散，反而影响阅读连贯性。

3. 配合字体大小调整：行高应与字体大小保持比例协调，推荐公式：行高 = 字体大小(px) * 1.5 / 字体大小(px)

4. 跨设备一致性：不同设备（PC/平板/手机）可能需要不同设置，可通过CSS媒体查询实现：

   @media (max-width: 768px) {
     .markdown-body {
       line-height: 1.7; /* 移动设备增大行高 */
     }
   }
   

通过本文介绍的方法，你可以根据个人阅读习惯和笔记类型，定制最舒适的行高设置。一个合适的行高不仅能减轻眼部疲劳，还能提高笔记处理效率，让知识管理过程更加流畅。如果希望进一步优化笔记体验，可以探索Zotero-Better-Notes的其他自定义功能，如编辑器样式定制和模板系统。

提示：所有CSS修改需重启Zotero生效。建议使用浏览器开发者工具（F12）实时调整参数，找到最佳设置后再保存到文件中。