Zettlr中自定义任务列表完成项样式的解决方案

在Zettlr这款Markdown编辑器中，用户经常需要处理任务列表。默认情况下，已完成的任务项(checked items)会显示为带删除线的文本。然而，许多用户希望自定义已完成任务的显示样式，比如降低对比度或移除删除线效果。

问题背景

在Zettlr的早期版本(如2.3.0)中，用户可以通过简单的CSS规则来自定义已完成任务的样式：

.task-item-done {
    opacity: 0.5 !important;
    text-decoration: none !important;
}

但随着Zettlr升级到3.x版本，底层编辑器架构发生了变化，原有的CSS选择器不再适用。这导致用户自定义样式失效，已完成任务项与未完成项在视觉上差异不明显。

解决方案

对于Zettlr 3.x版本，需要使用新的CSS选择器来定位已完成任务项。以下是有效的CSS规则：

.cm-line input[type="checkbox"]:checked,
.cm-line input[type="checkbox"]:checked ~ .cm-content-span {
    opacity: 0.4 !important;
    text-decoration: none !important;
}

这段CSS规则做了以下工作：

1. 匹配所有被勾选的复选框(input[type="checkbox"]:checked)
2. 同时匹配这些复选框后面的内容(~ .cm-content-span)
3. 将透明度设置为0.4(可根据需要调整)
4. 移除默认的删除线效果

调试技巧

要在Zettlr中调试CSS效果，可以按照以下步骤操作：

1. 在设置中启用"Debug模式"(位于"高级"选项下)
2. 从"Develop"菜单中选择"Toggle developer tools"打开开发者工具
3. 在开发者工具中可以实时查看和修改CSS效果

样式调整建议

除了简单的透明度调整，用户还可以考虑以下样式修改：

/* 更柔和的颜色变化 */
.cm-line input[type="checkbox"]:checked ~ .cm-content-span {
    color: #888 !important;
    font-style: italic !important;
}

/* 保留删除线但更美观 */
.cm-line input[type="checkbox"]:checked ~ .cm-content-span {
    text-decoration: line-through !important;
    text-decoration-color: #ccc !important;
}

/* 复选框本身的样式修改 */
.cm-line input[type="checkbox"]:checked {
    filter: grayscale(80%) !important;
}

通过这些CSS规则，用户可以根据个人喜好和工作环境，创建最适合自己的任务列表视觉样式，提高文档的可读性和工作效率。