4

为了在 Safari 中愉快地摘录文章,我开发了「obsidian-highlighter」扩展

 2 years ago
source link: https://sspai.com/post/72231
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
为了在 Safari 中愉快地摘录文章,我开发了「obsidian-highlighter」扩展
为了在 Safari 中愉快地摘录文章,我开发了「obsidian-highlighter」扩展

Matrix 首页推荐

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


Obsidian 已经成为了当下炙手可热的热门「知识管理」工具,自2020年接触依赖使用已近两年,也在「少数派」分享了《玩转 Obsidian》系列文章。个人在使用 Obsidian 的过程中,最重要的一个环节就是「文章摘录」。我在《玩转 Obsidian 05:如何进行阅读及摘要》中曾介绍了一款 Chrome 下的扩展 「Roam-highlighter」可以很方便的将网页内容摘录到笔记中。

这款扩展一直都是我配合 Obsidian 使用的利器,但是自从我将 safari 当做主流浏览器(没错它现在很棒了)后就遇到麻烦了,由于有大量的文章需要摘录,就会不停的在两个浏览器来回切换,为了解决这个问题,我就想有没有可能在 Safari 中实现同样的扩展。于是就开始着手研究如何开发 Safari 浏览器扩展,经过一番折腾,终于顺利上架 Mac App Store,所以今天就在少数派跟大家介绍一下插件的使用。

本文含有大量 Gif 图片,加载稍慢,可以等页面加载完成后观看,也可以直接看下边的视频介绍。

Obsidian-highlighter 是一款 Safari 扩展应用,启动「Obsidian-highlighter」插件可直接在 Safari 中对「网页原文」进行「高亮标注」,并且最大限度的保留原文的样式(Header、加粗、斜体、链接甚至层级)。同时提供对 Obsidian 友好的 markdown 格式,支持一键将「高亮标注」导入(或者手动粘贴)到 Obsidian 中。

1认识 Obsidian-highlighter

在 Mac App Store 搜索「obsidian-highlighter」安装后即可使用。也可以 点击安装。推荐查看以下视频快速掌握使用方法: B 站Youtube作者基于 Mac Safari 开发和调试,大家可放心使用。如果遇到问题、疑问、想法或请求可以通过使用 GitHub 问题追踪器:Submit an Issue.

1激活扩展

在 Safari 打开网页,按下快捷键 Alt+X 或者点击扩展栏右上角的图标,均可激活 Obsidian-highlighter 扩展。激活仅适用于当前打开的 Tab 页面,新建页面要重新激活扩展。

扩展应用激活后,再次按下快捷键 Alt+X 或点击右上角图标可以「隐藏/显示」右下角窗口(PS:窗口隐藏状态下,扩展应用仍可用)。

f34be21bf58f23157f9231f3b0f93e2e.gif高亮标注

在 Safari 的任何页面中,我们都可以使用 Obsidian-highlighter 扩展进行「高亮标注」。在网页中选中一段文字,并按下快捷键 CMD+X 完成「高亮标注」,被标注的文字会显示「黄色底色」。

当完成「高亮标注」后,当前内容会自动保存到「剪贴板」中,同时标注内容也会「展示」在右下角窗口中,方便我们查看样式。(这些样式等同于将来导入到 Obsidian 中的样式)

拷贝标题和URL

aba85f2cc55a596f19580689528e5579.gif拷贝标题和URL

如果只是想要拷贝标题+URL,只需要在激活扩展之后,按下 CMD+X 快捷键即可,此时无需选中任何文字,标题+URL 就会以 Markdown 格式保存到剪贴板。

保持缩进和原始样式

f41733ef52b2338773e56ff1e9e9459e.gif保持样式

在进行「高亮标注」按下 CMD+X 的时候,Obsidian-highlighter 会自动保持原文中的样式(加粗/URL)以及层级,并按照 Markdown 格式保存。

调整高亮层级

a2d9f79e2fcdab06b81ce84a2ecd5571.gif调整层级

对于已经进行了「高亮标注」的文本,可以通过将「标注内容」再次选中后,按下 Alt+A 进行层级调整。注意,这只会影响被调整的这一行后续高亮标注内容的层级,所以如果需要调整一段内容的层级,应该在这段内容的上一段进行「层级调整」

移除高亮标注

1移除高亮标注的三种方式b889215ee3d4668dbad349aba62f28da.gif移除高亮效果

共有三种方式移除「高亮标注」:

  1. 单行移除:选中要移除的「高亮内容」后,再次按下 Cmd+X
  2. 整段移除:鼠标选中要移除「高亮标准」任意部分内容,按下 Alt+Click (鼠标点击)。
  3. 移除所有:按下快捷键 Alt+Q

「双向链接」

78c711f0a046569311eab446de3cd4d9.gif双向链接

可以对已经进行过「高亮标注」的内容添加「双向链接」。被设置成「双向链接」后,底色变成蓝色。设置单词为「双向链接」:在已经「高亮标注」的段落上,双击,即可选中一个单词,同时单词被设置为「双向链接」

设置一句话为「双向链接」:在已经「高亮标注」的段落上选中一段内容,按下 Alt+Z,即可设置为「双向链接」。删除「双向链接」:在「双向链接」上按下 Alt+Click(鼠标左键单击),即可删除「双向链接」(蓝色变回黄色)。

修改窗口大小

修改窗口大小,保存后窗口尺寸变化

a97c270f77638f863d429a384e1ca951.gif修改窗口尺寸

修改标题

修改标题,两种方式:

方式1:直接修改,本次生效

39f55406949ece2ad774c65996214b2e.gif方式1:修改标题

方式2:新建标题样式,保存后可以一直使用

1方式2:新建标题

换行指的是「每次」选中一段进行「高亮标注」时,其中如果有换行,将按照如下四种方式进行处理

方式1:默认-所有换行都新建子弹笔记,并保持在同一层级。此方式为默认设置,即默认情况下,插件会保存当时选中内容的层级,并按照「子弹笔记」的方式进行保留。

8f9c38002107427aa91da32a49e65d7a.gif换行方式1

方式2:每个换行都处于第一段的下一级。此方式会每一次「高亮标注」的内容中的换行都放到第一行的下边。

e4af5cc99fdc5d1f59506a4745855fc0.gif换行方式2

方式3:每个换行都按「软换行」处理。即每个换行都保留,但是并不按照「子弹笔记」方式保留缩进。

15db9b1bb44b232ad7007c4e46099f5c.gif换行方式3

方式4:用空格替代换行。顾名思义,将所有换行替换为「空格」。

导入到 OBSIDIAN

1导出到 Obsidian

在设置中可以通过配置「库名」和「路径」,支持一键导入到 Obsidian。「库名」就是 Obsidian 的仓库名称,默认值是 personal正常情况下,你需要改成自己的「库名」,否则会遇到如下报错:

1

「路径」就是指我们需要导入到 Obsidian 中的路径,默认导入到 highlight/ 下。

中文符号遇到长链接导致奇怪换行

我们在进行中文摘录的时候,如果你喜欢「大段大段」的选择并进行摘要,很可能遇到如下奇怪的换行:

1奇怪的换行

出现这个问题的原因是 JavaScript 脚本在解析 Select 文本的时候,会将 # HTML <a> 也就是我们所说的「长链接」解析成两段,所以导致这里换成了两行。

要想解决此问题,分两步:

第一步:设置「换行方式」为「删除掉换行」。

1设置换行方式

第二步:重新摘录,不再「大段摘录」,而是逐行选择重点内容进行摘录,由于 Obsidian-highlighter 会自动保持原有层级,所以最终呈现效果如下:

1逐行摘录

PS:我们摘录内容并不是「拷贝」内容,所以建议根据阅读的结果进行「精选摘录」而非「大段标注」,否则就失去意义。

逐级调整段落层级

有时候我们摘录的原文层级并不是我们想要的层级,这时候就需要我们手动调整「层级」,例如一段文字如下:

1层级不一致

图中我也标记了期望的层级样式,下边我们根据上文中「调整层级」的设置进行处理,但是这里一定要记住一点「我们调整的是当前选中段落的下一级」

例如我们希望「自信的产生」是顶层,则选中「自信的产生」,并按下 Alt+A 当颜色变为「红色」时,代表这一行以下内容都是这一行的「下一级」,如图:

1

下一步我们希望「怎么增加自信」成为第二级,此时关键在于选中「怎么增加自信」的上一段,并按下 Alt+A 知道字体变成「蓝色」代表他下边的内容都是这一行的「上一级」,如图:

1

如此反复调整,最终就可以得到我们想要的层级了:

1

当前扩展的灵感和源代码均来自 Chrome 浏览器插件 roam-highlighter,我在用它搭配 Obsidian 对文章摘录的时候非常方便,并在多篇文章中分享了使用方法:

将 Chrome 插件「roam-highlighter」迁移到 Safari 中过程中也发现了一些 Bug 和使用上的问题,后续我会继续维护并修复相关问题。

感谢大家支持,并欢迎大家上报问题 Submit an Issue

定价方式和送码活动

obsidian-highlighter 本身开源的,迁移后的代码我也在 Github 开源,但是上架 Mac App 还是有些成本,所以价格定在 3元。

为了回馈少数派用户,欢迎大家在评论区说说对本插件的建议,或者自己平时用 Obsidian 进行摘录的工具和方法。我将在一周后(4 月 13 日)选择 15 位读者赠送 obsidian-highlighter 的兑换码。


个人一直在维护《玩转 Obsidian》系列文章,并持续更新,对此系列感兴趣可以在以下渠道找到相关文章:

玩转 Obsidian 系列目前包括文章:

可以在 TwitterTelegraminstagram 等渠道关注我,获取更多有意思的讯息。

> 下载 少数派 2.0 客户端、关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK