我使用Dynamic Highlights插件设定了挺多样式，现在想打印一些页面方便用纸质版进行学习，但是自带的导出的PDF不识别自定义的样式。
临时需要，截图还能搞定，现在每个笔记内容笔记多＋好几个页面，得找个快捷方法才行。
看效果：
正常文本**普通知识点**正常文本
正常文本***了解知识点***正常文本
正常文本 __熟悉知识点__ 正常文本
正常文本 _**掌握知识点**_ 正常文本
***了解知识点***：使用3个星号加粗
__熟悉知识点__ ：使用双下划线加粗，外围还要有空格或位于句首
_**掌握知识点**_ ：使用下划线+双星号组合，外围还要有空格或位于句首
不是很好办,
这个 Dynamic Highlights 插件介绍里写着不支持阅读视图, 且很久不更新, 看来近期不太可能新加功能了
Ob 导出 pdf 是根据阅读视图样式的, 所以就看不到 Dynamic Highlights 里的自定义细微格式
目前感觉简单可行的, 其实就是截图, 许多第三方截图工具带滚动截屏, 也可以用用
此外, 如果标记的格式非常少且使用习惯固定, 比如一定是写成 ***特定文本***, 那么阅读视图里结合 css 也能实现导出 pdf 附带样式
这时其实就跟 Dynamic Highlights 没关系了,
即, 这时不是对匹配到的文字加特殊样式, 而是针对全部的 *** 三星号格式加特殊样式
*** 三星号标记在阅读视图里会生成 <strong><em>特定文本</em></strong> 的 HTML 标签, 这可以拿 css 指定样式, 导出 pdf 时也能看到
问了一晚上ai，曲线救国了（就是你的思路）。针对我目前想要打印的内容，我改了正文中的标记符号＋只用插件锁定 掌握知识点
**普通知识点** -> 保持不变
***了解知识点*** -> 保持不变
==熟悉知识点== -> 改为双等号高亮
_**掌握知识点**_ -> 保持不变
/* ============================================
知识点样式
只为 _**掌握知识点**_ 添加类名
============================================ */
/* 1. 普通知识点 - **普通知识点** (编辑模式) */
.cm-s-obsidian span.cm-strong:not(.cm-em):not(.cm-formatting) {
color: #022236 !important;
background: linear-gradient(
to right,
rgba(2, 34, 54, 0.1),
transparent 10px,
transparent calc(100% - 10px),
rgba(2, 34, 54, 0.1) 100%
) !important;
padding: 0 2px !important;
border-radius: 2px !important;
}
/* 2. 了解知识点 - ***了解知识点*** (编辑模式) */
.cm-s-obsidian span.cm-em.cm-strong:not(.掌握知识点):not(.cm-formatting) {
color: #27ae60 !important;
font-style: normal !important;
border: 0px solid rgba(39, 174, 96, 0.1) !important;
background-color: rgba(150, 245, 190, 0.08) !important;
box-shadow: 0 0 2px rgba(39, 174, 96, 0.2) inset !important;
}
/* 3. 熟悉知识点 - ==熟悉知识点== (编辑模式) */
.cm-s-obsidian span.cm-highlight:not(.cm-formatting) {
font-weight: bold !important;
color: #9b59b6 !important;
text-shadow: 0.5px 0.5px 1px rgba(155, 89, 182, 0.5) !important;
background: repeating-linear-gradient(
to bottom,
transparent,
transparent 1px,
rgba(155, 89, 182, 0.5) 1px,
rgba(155, 89, 182, 0.1) 2px
) !important;
padding: 0 0.2em !important;
border-radius: 3px !important;
margin: 0 -0.2em !important;
}
/* 4. 掌握知识点 - _**掌握知识点**_ (编辑模式)
Dynamic Highlights会为这个添加 .掌握知识点 类 */
.cm-s-obsidian span.掌握知识点,
.cm-s-obsidian .cm-em.cm-strong.掌握知识点 {
color: #eb3723 !important;
font-style: normal !important;
font-weight: 700 !important;
text-decoration: underline wavy rgba(235, 55, 35, 0.7) !important;
text-shadow: 0.6px 0.6px 1.5px rgba(235, 55, 35, 0.5) !important;
background:
radial-gradient(circle at center, rgba(235, 55, 35, 0.1) 0%, rgba(235, 55, 35, 0.15) 70%, transparent 100%) !important;
background-size: 100% 150% !important;
background-repeat: no-repeat !important;
background-position: center 80% !important;
padding: 0.05em 0.25em !important;
margin: 0 -0.25em !important;
border-radius: 3px !important;
box-shadow: 0 4px 12px rgba(235, 55, 35, 0.15) !important;
transition: all 0.3s ease !important;
}
/* ========== 阅读模式下的样式 ========== */
/* 1. 普通知识点 - **普通知识点** (阅读模式) */
.markdown-preview-view strong:not(em strong):not(strong em) {
color: #022236 !important;
background: linear-gradient(
to right,
rgba(2, 34, 54, 0.1),
transparent 10px,
transparent calc(100% - 10px),
rgba(2, 34, 54, 0.1) 100%
) !important;
padding: 0 2px !important;
border-radius: 2px !important;
}
/* 2. 了解知识点 - ***了解知识点*** (阅读模式) */
.markdown-preview-view strong em {
color: #27ae60 !important;
font-style: normal !important;
border: 0px solid rgba(39, 174, 96, 0.1) !important;
background-color: rgba(150, 245, 190, 0.08) !important;
box-shadow: 0 0 2px rgba(39, 174, 96, 0.2) inset !important;
}
/* 3. 熟悉知识点 - ==熟悉知识点== (阅读模式) */
.markdown-preview-view mark {
font-weight: bold !important;
color: #9b59b6 !important;
text-shadow: 0.5px 0.5px 1px rgba(155, 89, 182, 0.5) !important;
background: repeating-linear-gradient(
to bottom,
transparent,
transparent 1px,
rgba(155, 89, 182, 0.5) 1px,
rgba(155, 89, 182, 0.1) 2px
) !important;
padding: 0 0.2em !important;
border-radius: 3px !important;
margin: 0 -0.2em !important;
}
/* 4. 掌握知识点 - _**掌握知识点**_ (阅读模式)
注意：Dynamic Highlights可能不会在阅读模式下添加类名 */
.markdown-preview-view em strong {
color: #eb3723 !important;
font-style: normal !important;
font-weight: 700 !important;
text-decoration: underline wavy rgba(235, 55, 35, 0.7) !important;
text-shadow: 0.6px 0.6px 1.5px rgba(235, 55, 35, 0.5) !important;
background:
radial-gradient(circle at center, rgba(235, 55, 35, 0.1) 0%, rgba(235, 55, 35, 0.15) 70%, transparent 100%) !important;
background-size: 100% 150% !important;
background-repeat: no-repeat !important;
background-position: center 80% !important;
padding: 0.05em 0.25em !important;
margin: 0 -0.25em !important;
border-radius: 3px !important;
box-shadow: 0 4px 12px rgba(235, 55, 35, 0.15) !important;
transition: all 0.3s ease !important;
}
/* 掌握知识点悬停效果（仅阅读模式） */
.markdown-preview-view em strong:hover {
background:
radial-gradient(circle at center, rgba(235, 55, 35, 0.15) 0%, rgba(235, 55, 35, 0.22) 70%, transparent 100%) !important;
text-decoration-color: rgba(235, 55, 35, 0.8) !important;
font-weight: 750 !important;
color: #e52a1a !important;
transform: translateY(-1px) scale(1.01) !important;
box-shadow: 0 5px 14px rgba(235, 55, 35, 0.2) !important;
border-radius: 3.5px !important;
text-shadow: 0.7px 0.7px 1.5px rgba(235, 55, 35, 0.6) !important;
}
另外，找到个Dynamic Highlights的进阶版aDHL，可以对设定的规则进行分组开关，稍微方便些了（缺点：不能插件里直接写CSS片段了）
谢谢分享~ 看了下这个 aDHL 发现它还有个好处是可以对阅读模式起效:
如图, 左编辑, 右阅读:
这阅读视图导出 pdf 之后也是能看到高亮的, 这个基本跟楼主需求一致了
最后问题是, aDHL 不能插件里直接写CSS片段, 自定义程度弱一些, 但我发现它生成的 HTML 是:
<span
class="adhl-highlighted 更多高亮N"
style="position: relative; background-color: rgba(0, 254, 18, 0.59); padding: 0.15em 0.25em; margin: 0px; border-radius: 0.25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-clip: padding-box; display: inline;">
更多高亮7
</span>
即, 它在阅读视图的 HTML 结构里添加了指定的 classname (这里是 .adhl-highlighted.更多高亮N ), 那么简单样式靠 aDHL, 更复杂的样式靠额外结合 css 片段, 应该是可以满足要求的, 如下是拿 css 片段再给 aDHL 已经设好的样式打补丁
.markdown-preview-view .adhl-highlighted.更多高亮N {
text-decoration: underline 2px grey;
font-weight: bold;
}
.markdown-preview-view .adhl-highlighted.关键词2 {
background-color: #ee77aa55;
font-weight: bold;
}
如图, 上半是打补丁之前仅靠 aDHL 的样式, 下半是再结合自定义 css 片段的样式 (对导出 pdf 也有效)
Dynamic Highlights在阅读视图里不生效的问题，Highlight-In-Preview可以修补实现。