Skip to content

RemNote群协作知识库🌴

jackiexiao edited this page Jan 6, 2022 · 13 revisions


GITHUB社区

也欢迎大家到基于Github的中文社区进行知识库构建,github的开放性更强

社区地址 RemNote-CN

访问方式2 RemNote-CN

访问方式3 RemNote-CN

此文档使用提醒

小伙伴们请注意:下边这段是知识库sx的使用规则,如果你不向知识库内添加内容(欢迎添加),可以直接Ctrl+F搜索你感兴趣的关键词使用本库,无需阅读本节。

  • 下边内容分享/更新人:Seagull jm

  • 文档说明:

    • 这是 ,RemNote知识协作分享文档,欢迎每个1026788769群成员的加入

    • 这个文档是开放式的,你可以分享你的RemNote使用心得也或其它任何知识

    • 这个文档是由大家一起维护的一个"公共空间",请勿发任何不良的内容到这个文档内

  • 文档书写方式:

    请以【**标题+无序列表/大纲】**的方式进行(下图的功能)pugsy

    • 腾讯文档和RN是完美契合的,请用上图的格式进行内容添加,也就是:

      • Tab快捷键为进,shift+tab为缩

        • 这样的方式可以方便大家可以直接复制粘贴到RN使用,内容结构也很明晰方便阅读

        • 后文中的《怎么备份RN(演示格式)》有更多示范。

      • 【推荐】也可 以从RemNote写好直接拷贝过来(有时 需用ctrl+shift+v快捷键粘贴)。

        • 【不推荐】【**标题+线性内容】的方式添加,也就是一般的线性书写结构,**但你也可以这样写,这点不做限制。
    • 分享人与修改人

      • 可在你分享或修改的内容前写上分享人和修改(可选)。
    • 尽可能简单

      • 书写时尽可能用简单的书写方式,这样书写成本就会很低,方便他人把文档便捷的迁移到自己的RemNote中**。**
    • 标题

      • 请用下图"**副标题"**方式标出,这样方便在左侧目录显示出来,方便

  • 善用Ctrl+F搜索和查询:

    • 你遇到任何问题可以在此文档中使用ctrl+F快速搜索,这样会比在群里提问高效得多,此文档适合使用Ctrl+F+关键词进行查找阅读,如你遇到库的问题可以搜索库即可快速得到答案。

rxx

h

`gunvvc 就。 叫crc#这`

`gunvvc 就。 叫crc#这`

  • 文档的知识整理,与父子归属问题:

    • 你可以把滨 任意你想分享的内容或者别人在群里遇到的问题整理到此文中注意用演示格式标题+无序列表/大纲】。

    • 无需太过于考虑每个主题与主题间的父子归类问题,因为Ctrl+F就能找到相应的内容,我们只需按**用演示的格式【标题+无序列表/大纲】**方式内容添加就行。

    • 手动双向链接跳转和父子关系

      • 这个文档可以用时间戳配合Ctrl+F的方式做双向链跳转和父子关系的构建(如果有这个需要),可多个

      • 标注”时间戳“进行。。快速打时间戳的工具

      • 时间戳

      • 你可以复制时间戳”20210313220031”后用Ctrl+F搜索“20210313220031”就能跳转到”《群内常见问题与解答》,我们打双向链标记可以以下边的方式进行,(请用蓝色标注文字,时间戳前有关键词提示这样方便知道是那跳转那的):

        • 上边内双向链接:"知识整理,与父子归属问题<----->手动双向链接跳转和父子关系--20210313220031"

        • Ctrl+F搜索时间戳可以进行文内双向链接跳转

  • 防止乱改:

    • 这个文档群主会定期对内容进行对比检查和本地备份,这样避免了乱改的问题,如果你发现乱改问题可以向群内管理和群主反应,只有1026788769群成员可编辑此文档,若发现乱改行为会被立马T出该群。

    • 群内任意成员也可以进行这方面的维护,只要点击时间如下图,就可轻松查看谁修改了什么内容和进行某个地方的内容恢复,非常方便。

    • 如果有不想被他人修改的内容

      • 可以自己建立自独立的腾讯文档或者别的方式,把链接和内容分享到文内,标题下请标注"请勿修改",如果被修改了也可以很方便的用自己原文覆盖,如果恶意修改可向群内反应,我们会直接把恶意修改的人员T出
  • 强大灵活的知识库:

    • 通过腾讯文档的方式配合QQ群我们就可以构建一个比较特别RemNote知识社区,未来有更好的方式这个知识库也很容易进行迁移,有需要的朋友也可以一键导出word就下载这个知识库为Word到本机保存非常方便。
  • 请注意:

    • 这个文档为公开共享文档,请勿在此书写任何你不想无条件公开的内容。

怎么备份RN(演示格式)

  • 下边内容分享/更新人:Seagull 、糖油粑粑(20210402175204)

  • 大家尽量按这个格式进行内容添加,这种内容格式可以直接完美复制进RemNote,RemNote内容贴过来后也可以直接变为下边的格式。

  • 怎么备份RN

    • 下边的方法比导出备份要来的及时方便

      • 备份

        • 1、这个文件夹\Roaming\RemNote

          • 一般在这个路径下C:\Users\用户名\AppData\Roaming\RemNote
        • 2、备份库位置下的文件

          • 也就是files文件
      • 恢复,在需要恢复的时候或设备上直接对应位置粘贴恢复即可

        • 有时候恢复需\Roaming\RemNote文件夹再恢复会更好

        • files文件可以放到“新库”的文件路径下,再在软件内设置好新库位置点一下 Update Knowledge Base 即可恢复过去。

          • RN会自动批量更新附件和图片路径到新位置。

          • RN不用本地图床也没问题 。

        • 备份和恢复可以使用Acronis True Image进行,更方便。

      • 用于同步

        • 这个文件夹\Roaming\RemNote 和files文件也可以用于同步

          • 同步时有一边的RemNote需防火墙屏蔽,被同步的位置软件需关闭否则\Roaming\RemNote\Cache文件夹会被占用同步不成功。
  • 『在线库』转『本地库』官方指南:

a2dd6b6e83146f17c0f92854ae546170

  • 备注:

    • 『在线库』不能删除,只能清空,如下图

      • 『库』可以删除,如下图:

d276d3deaf77fb7d4bb3551f58e6decb46ebac46b2877e0b7333c80667f10eba

🚩新手小白看过来(如何入门)

  • 下边内容分享/更新人:Seagull

  • 新手入门引导建议先看Remnote anki+RoamResearch的化身,免费的"RoamResearch"桌面版! - 知乎 这是一篇引导文章,里边推荐了很多教程,可以先从笔记的角度进行学习,后期再看官方教程,因为官方教程默认大家都是已经非常明白它笔记系统是如何使用的直接从记忆功能开始教学,而且教学内容的例子不是很易懂是软件作者的专业学科,很像劝退教程。

  • 新手可以从大纲的简单使用开始用起,先不学习复杂的内容,先用起来,学某部分内容先用用惯了再继续学,不易一次图多。

  • RemNote“搜索”的使用方法必看

remnote测试版地址

2dc3a2ea477215c9251df0b669651042

测试版pro用户和终身买断用户可以使用,大部分新功能和bug修复都在测试版上优先进行,可以到设置里看到版本号。https://beta.remnote.io/beta_server

怎么迁移Obsidian文档到RemNote

首先查看文档

RemNote威廉笔记教学014之Obsidiad350fc3b2f52000fa037626a0facb1een如何迁移到Rem07632645569d76fe6eb65e747b83650aNote(markdown迁移Remnote) - 知乎

因为直接导入会造成图片链接丢失, 所以导入前请做如下操作来修复图片链接:

  • 备份需要导入的Ob文件

  • 复制需要导入的Ob vault目录到一个别的目录(不要在Ob vault目录执行)

  • 复制要导入的Ob vault目录下所有图片 RN本地的 files目录里

  • 在Linux OS 或者 MacOs 上使用如下shell命令对文档进行处理来修复图片链接:

find ./vault目录 -type f -exec sed -i 's/!\[\[\( sted image [0-9]*.png\)|*.*\]\]/!\[\1\]\(%LOCAL_FILE%\1\)/g' {} \;

python3 obTool.py obVault目录

  • 选择合适的压缩软件对处理后的Ob 目录做 zip压缩

    • 目前winrar, bandizip 压缩正常, 360压缩, 7zip可能会造成文件导入后乱码
  • 导入压缩包到Rn(具体参考文首的知乎文档)

💡群内常见问题与解答

  • (可以把你的遇到的问题写在下方给知道的成员来回答)

  • 软件不是中文的怎么办?

    • 下边内容分享/更新人:Seagull

    • 以下内容补充人:风铃

      使用chrome浏览器在网页端打开remnote【官网地址http://www.remnote.io 】随后打开谷歌翻译,即可查看到remnote软件的中文翻译。既可以更方便的使用网页端,也可以用来学习本地客户端软件的使用。pc版和网页界面很相似的。【机器翻译的不是很好,但是可以简单的解决使用问题】

  • RemNote的表格怎么用?

  • 各款双向链笔记软件怎么样?

  • 怎么解决网页版输入汉语文字后会出现光标回跳?

    • 光标回跳的场景与对应解决方法

      • 我使用过程中,发现输入两个冒号后,如果继续输入中文,会出现光标回跳。对应解决方法:1.双冒号后不要输入中文。2.尽量减少使用双冒号用法,可以采取其他方法(比如选中文字后,继续选择cloze/快捷键)
    • Safari浏览器输入任意内容后光标向前跳怎么办

  • 电脑手机输入斜杠/没有反应怎么办?

    • 这是输入法导致的问题,更换输入法。

    • 群友astrok的解决方案

      • ios 用chrome 访问rem 然后 请求切换到桌面版网站 即可!同时也能解决同步问题。safari也可以。
  • 关于传送2门(portal)的修改:

    • 下边内容更新/修改人:YAN

    • 在一个rem中使用[[添加了一个portal,但是还没生成rem,后续发现这个rem中的portal多写了一些内容或少写了一些内容,如何针对这个rem去修改这个portal?

    • 直接修改就行,传送门对应的内容同步更新。门可以有多个,内容只有一份。

  • 传送门(块嵌入)被引用后没有反向链接?

    • c118c06948c1f438f87869b503baabc4

    • 这时只需要把引用内容的Rem内设置为Document模式被引用笔记内就会出现反向链接。

  • 怎么从PDF中只复制文字:

    • 使用 ctrl + shift + c: 只复制PDF中的文字, 而不生成RN的引用
  • 怎样从ppt复制内容:

    • 使用ctrl + shift + v: 只粘贴ppt中的文字,如果ctrl+v会粘贴成图片

    • 直接从ppt文件中拖拽到bullet后面

  • 如何用最少时间复制粘贴欧陆词典单词释义:

    • 直接选中拖拽

    • 目前感觉识别功能都挺搞心态的

    • 软件之间置顶不方便可以借助deskpins——桌面图钉

  • 怎么反馈bug和软件需求:

    • 下边内容分享/更新人:Seagull

    • https://github.com/remnoteio/remnote-issues/issues

    • 如果你英文不太好,可以用翻译工具把中文翻为英文,英文又翻译为中文你能看懂的话,这样老外开发者差不多也能看懂。1d0a8109ca724919119172c0041d06e2

      • 在线翻译DeepL墙裂推荐,很多专业内容要比谷歌翻译准确一些,学校强势英专生天天用:D
  • Remnote大纲背单词怎么实现:

  • tag和stub区别

    • stub 和tag总感觉本质上还是比较相似的(自己说不太清楚,但是下面这个操作还是比较清晰的)

      • 这波理解我还在第一层,tag和stub同时出现,能看作tag是软件自带的power rem能把所有的tag弄到一起包括所有的stub(tag的范围看起来好像更广一些),stub就是一个rem只能汇集所有的stub不管是不是tag,不是tag的stub应该就是只是出现在句子中那些的吧(stub的位置看貌似更灵活一些)不懂怎么在句中加stub

        • 20ee00244cbe3bed7d8a4ba6b236ca1d

          ——摘自官方指南

      • tag如果直接使用的笔记内容里面含有的关键字作为tag内容,之后在使用portal时,会出现双层portal(有点鬼畜)多处联动;只有在使用非笔记内容作为tag的时才会避免这个发生

        • 47fd5b18cfbeffd72f494f6cabe68aa3

        • d6103ac2070ea55d8115d30cf7db616a

      • stub在建立时直接使用ctrl+enter,可以显著减少上述tag重复不重复带来关键词内容的选取的时间浪费

    -   ![8161a7fc2f35c4f8947c2901cee0f02b](https://user-images.githubusercontent.com/69051504/125151293-13d54080-e178-11eb-8a3b-068be31ff29b.png)
    
        -   stub管理——删除重复stub和类似大纲管理标签的想法如图注:
    
        -   ![36c35a92c84c761e3935ef6031994e33](https://user-images.githubusercontent.com/69051504/125151247-0029da00-e178-11eb-8f40-e17114d90bec.png)
    
            -   另外,如果自己之前设置的stub内容自己不想用了,可以直接对stub进行修改(批量修改标签挺方便的,但是有个问题就是自己在批量设置stub的时候还是挺麻烦的,当前自己操作是一个一个设置有点浪费时间)
    
            -   简易大纲管理参考marginnote3做法,不知道这个会不会和群主下面的想法冲突(在marginnote3里面这种管理就比较类似文件夹,感觉对强迫症友好)
    
  • 如何使用stub portal search portal slot

    • 问题:

      • 批量修改之前所有的daily document的一些条目

        • d36d62e944c836a587c5748f38b73a45
    • 原因:

      • 记笔记之前没有办法想好以及将今天自己要记录的笔记归好类
    • 解决:

      • 方法1:

        • 直接使用portal

          • 优点:

            • 简单
          • 缺点:

            • 一次性修改,下次修改需要重新使用portal浪费时间
      • 方法2:

        • 使用search portal+stub设置 (目前不是很喜欢tag,管理起来比较麻烦)

          • 优点:

            • 后期管理修改方便
          • 局限:

            • 需要每次都在条目后面打上stub比较麻烦改进:针对缺点1

            • 如果之前模板都没有弄stub就需要返回贴上

          • 改进:针对局限1

            • 使用一下 portal——解决跨文件麻烦

            • 每次建立daily document的时候可以提前拟好自己的模板

              • 直接复制

                • 局限:

                  建立新的文档都要找原文档位置

                • 改进:

                  单独建立一个模板文件

                • 直接使用portal

                  如果可以的话不知到能不能和slot结合使用slot复制到新的一天文件中

              • 使用slot

                • 局限:

                  pro功能

                  f37f170e091044a89a47a23f97daf925

                • 其他:

                  群聊前辈提醒说在使用slot功能时需要将parent和children都打上slot(ctrl+alt+s)

  • 如果系统自建很多stub的rem,可以用merge功能将重复的stub合并

    • 例如document下会有很多stub

    • (但是不建议使用document功能,不符合remnote软件思想)

    • 标题重复时单击笔记标题后软件的最下方一排会显示出橘色的merge字样

  • RemNote Documets 内很多Stub和零碎的文件 ?请不要在文件夹系统上再浪费时间

  • 怎么从word到RemNote

  • 1.2.9版安卓无法登录,没有IOS版怎么办

  • RemNote Library里的插件不生效怎么办

    • https://hannesfrank.github.io/remnote-library/#/ 里面点击插件,点击 Custom CSS Block 按钮(会自动复制)

    • 软件内 ctrl + p 搜索 Custom CSS 并进入

    • 注意是直接粘贴就行了,不需要点击 Add Blank

    • Block 在代码框里粘贴,那样反而不生效。

  • Remnote某个快捷键无效怎么办? 补充人:风铃

    • 问题解释:大概率是快捷键冲突了。

    • 解决方法一:更改快捷键,并重新尝试。【注意:只有付费用户和拥有会员权限的人可以自定义快捷键】【如何自定义快捷键,请自行摸索O(∩_∩)O哈哈~】【没有会员请查看方法二】

    • 解决方法二:找到冲突的另一个应用的快捷键并更改。【如何查看当前电脑的快捷键:请查看下方知乎链接: 谁占用了我的快捷键-? 知乎 https://zhuanlan.zhihu.com/p/348386583】【推荐使用OpenArk】

  • slot、concept或者descriptor状态怎么消除?

-   如上图操作即可取消。
  • 怎么加入有序列表?

  • ab3d89e49f0a648638430d17bb86fb06

    • 内容后用语法注意后边有个点"::1."或按上图操作
  • {{,[[, !! ## 有没有办法搞成中文状态也能识别?

  • 上边内容双向链接:

    • "知识整理,与父子归属问题<----->手动双向链接跳转和父子关系--20210313220031"

    • Ctrl+F搜索时间戳可以进行文内双向链接跳转

RN订阅付费及学生优惠

  • 下边均是群友经验仅供参考,106788769群与RemNote无任何利益关系

  • 目前主要付费方式

    • 信用卡

    • 银联借记卡付费说明

      • 可以使用借记卡可能会有如下一个或多个特征

        • 卡面有英文debit card

        • 卡号622~628开头(重要特征)

        • 正面有 有效期

        • 卡片背后有3位CVV/CVC校验码, 或者多位数字校验码

          (这个码不能轻易告诉别人)

        • 不是所有的借记卡都可以使用, 猜测的可用卡号范围在622~628范围内

          3debef9e1df80af461462149f66ec496

          而常见的621开头的借记卡是不行的

      • 卡片填写说明

        • 如实填写银行卡卡号, 16~19位数字

        • 卡片有效期按卡片填写, 没有的自己随便填写(有效期大于填卡日期)

      • CVC/CVV银行卡背面后三位,多位数字取后三位, 如果没有自己填写卡号后三位或则随便写等办法尝试

        • 姓名: 需要填写卡片的用户姓名, 一般是 拼音(名+姓的拼音), 但极少数情况可能是 中文姓名
      • 如果符合卡片多个特征(尤其是622开头), 但是填写时如果提示无效, 请尝试上面CVV/CVC 跟 姓名的不同组合

      • 目前成功付费的是工行借记卡(622),农行借记卡和建行借记卡, 邮政集邮卡(622)

        • 下边内容补充人:Lisa🌸

        • 建行借记卡流程

          • 开通网上银行

          • 建行手机 app 上开通境外支付

          • 存点钱进去(别存多了,存几十块钱就行)

        • 下面内容补充软: Kuriboh

          • 普通工行储蓄卡(我的卡是622开头的)

          • cvc填卡号后3位

          • 名字!!!拼音和中文都试试!!!

        • 下面内容补充人: 开源AI

          • 四川天府银行(623开头)卡正面“借记卡Debit Card”字样

          • 原名“张三”填写姓名“三 张”(中间有空格

          • 另外测试成都银行622开头的卡不行,卡正面“借记卡”字样

        • 下面内容补充人: 木木

          • 招商VISA可用

          • 有效期大于开卡日期即可

          • 第一次验证银行卡输入电话号码我用的是银行账户预留手机号(不知道不是预留行不行),但是,银行卡被拒绝了,以后 换卡验证均不需要验证手机号。

      • 使用银行卡时请注意保护个人隐私注意使用安全, 卡内不要留太多余额, 够RN月付的就行, RN是每月固定日期扣款, 每月20号。

  • RN官方也在进行支持支付宝付款, 担心银行卡安全的朋友也可以等待后期使用支付宝付款。

  • RN目前官方定价是6美元一个月, 学生和经济困难者可以向官方申请补贴价: 约为1.5~3美元不等(学生一般是1.5美元)。

  • 自行在连接内查找上图内容,点击here

❗使用outlook作为注册邮箱的用户请注意

优惠回馈的邮件可能会被outlook分类为垃圾邮件,而桌面版outlook的垃圾邮件默认是隐藏显示的。👇所以,如果发现很久都没有受到折扣通知邮件,到垃圾邮件里找一找。

ccd7e6841836af9c1dee6d3d79f45cce

威廉的RemNote专栏文章总汇

群内RN增强脚本说明

本群群友分享和撰写的好用RN脚本, 方便大家更方便快捷的使用RN。

增强脚本有两类, 一类使用Autohotkey运行, 另外一类使用Quicker运行。两款软件需要提前下载安装。

AutoHotKey:

https://www.autohotkey.com/download/ahk-install.exe

Quicker:

https://getquicker.net/Download

一键时间戳

脚本类型: Quicker

脚本分享地址:

https://getquicker.net/sharedaction?code=da9c21d2-f0b9-4ddc-d9f0-08d84c0a522e

一键生成202008291054的时间戳 一键生成14位时间戳精确到秒, 到文本,高效便利。 20200829105410或20200829105410格式的时间戳。

更多查看:

https://getquicker.net/Sharedaction?code=da9c21d2-f0b9-4ddc-d9f0-08d84c0a522e

RemNote的所有脚本动作合集

https://getquicker.net/Share/Actions?exe=remnote.exe

ABC的脚本动作合集:

https://getquicker.net/User/Actions/208928-%23ABC

AHK脚本动作可通过群文件获得

f9160db33e699bcae36929e662870732

我的RemNote备份方案

下边内容添加人:entropy

使用坚果云同步数据库文件夹,安装好坚果云后找到该文件夹,右键"同步该文件夹"即可

C:\Users\UserName\AppData\Roaming\RemNote

由于坚果云普通用户的流量限制,还是决定使用Ondrive同步附件文件夹

创建本地数据库时选择Onedrive的路径即可

d9a02ab0eef6ef46bb9b8026a12569d3

另一台电脑只需要创建时选择该电脑对应的的Onedrive文件夹即可

容灾性测试,老实说,用的这几天丢了一次数据,让我很怕丢数据,测试一下容灾性

卸载RemNote并删除C:\Users\UserName\AppData\Roaming\RemNote文件夹(一般卸载时不会删除该文件夹)

删除Roaming\RemNote时坚果云会提示,直接选删除即可,千万不要!!!!!勾选从云端删除

beaa7d36b391601a33fcfccfd0ab7ebb

打卡坚果云会发现数据都在

重新安装RemNote,打开为初始状态

关闭RN,找到Roaming\RemNote文件夹,清空里面的文件

8fa28f278d24349d0ef29b27a294bd3d

打开坚果云选择同步到本地,选到Roaming即可

ae440648f098de56cf8c5c93cb4238ea

b188c9388b9b0e6f000cd02c8b3973a610fbc53e957c457e6ce2070e314e6a54

打开RemNote发现已经同步完毕

28ec1de9ae3c0a1911629c026dfe8fc9

利用Onedrive同步本地库

下边内容添加人:如鱼得水

建立本地库时设置路径:D:\OneDrive\RemNote

  • 里面有个files文件夹,里面存放了笔记用到的PDF,图片,视频等

    不同设备的本地库的路径都设置在D:\OneDrive\RemNote

  • 用Cryptomator添加保险库RemNote,位置定位到D:\OneDrive\RemNote

    • D:\OneDrive\Rem Note\files就经过加密同步了
  • 用Cryptomator添加保险库“RN本地库同步”(可以自定义名称),位置定位到D:\onedrive\RN本地库同步

    • 把备份好的Roaming\RemNote的复制到D:\onedrive\RN本地库同步

    • D:\onedrive\RN本地库同步\RemNote就经过加密同步了

  • 建立本地库的软连接

    • 建立C:\Users\用户名\AppData\Roaming\RemNote链接目录,指向onedrive对应目录

    • mklink /d C:\Users\用户名\AppData\Roaming\RemNote D:\onedrive\RN本地库同步\RemNote

  • 可以在不同的设备上建立上面的软连接

    • 注意不同设备的onedrive的路径要一样

    • 注意修改C盘本地库的路径

  • 这样可以实现不同的设备remnote本地库的双向同步。

Remnote离线数据的同步、备份、转移——杂项

  • 在C:\Users\***\AppData\Roaming\RemNote的文件夹下,随便添加文件或文件夹,不会影响Remnote的正常运行。

    • 这意味着可以把Remnote的本地KB直接建立在这个文件下,即使是多个KB,也可以这样。如此一来,RN的所有文件就可以集中在一个文件夹下面了。

    • 当然,也可以把OneNote、OB、思源等其他软件的数据也放在这个文件夹下。便于多端同步、手动备份、U盘移动。

借助RemNote把anki打印为漂亮的PDF

下边内容添加人:Seagull

下文已经单独分享到知乎https://zhuanlan.zhihu.com/p/357810865

1424be9c55edce5fe6c2a22c772a99d0283be42521e4ca328ae4d9ef5fa8a2f0

如上图导出anki笔记,后用RemNote导入,导入后复制文本粘贴到Typora内开启代码模式,

17d6da4acc08bc7eda6ba97faabbbb2f789dd46c727093af24f86b60009df06d8e7677e5542aa404de420389e9dcdac3

https://getquicker.net/sharedaction?code=c803a348-0518-48cf-df7c-08d8dae40d7d 进行处理。相关知乎文章https://zhuanlan.zhihu.com/p/352401903

另外RemNote有利于PDF打印CSS,安装CSS后直接用RemNote的打印功能即可相关CSS https://github.com/hannesfrank/remnote-library/tree/master/public/scrolls/print-helper (它可以插入分页 ,隐藏黑点 增加行间距,感谢dvlcis的提供)

浏览器的安全设置建议

- 谷歌浏览器

- cookie

- 设置-隐私设置和安全性-cookie-退出Chrome时清除Cookie及网站数据

- 设置-隐私设置和安全性-cookie-阻止三方cookie

- 设置-隐私设置和安全性-高级-系统-关闭 Google Chrome后继续运行后台应用-关闭

- 需要注意的设置

- 设置-安全检查-自动填充-付款方式-都关闭

- edgeIk览器

- 隐私设置项

- 设置-隐私、搜索和服务-清除浏览器数据-选择每次关闭浏览器时要清除的内容

- 设置-隐私、搜索和服务-防止跟踪-严格

- 设置-隐私、搜索和服务-个性化你的Web体验-关闭

- cookie

- 设置-Cookie和网站权限-阻止第三方 Cookie

- 后台

- 设置-系统-关闭 Microsoft Edge后继续运行后台应用-关闭

❗❗Custom CSS 代码生效逻辑

一些朋友刚开始使用 Custom CSS 代码的时候可能会因为界面是英文的而没有注意到一些使用提示👇

43b61470a8abef76bebd2972ff786fda

虽然有些没必要,但是还是决定将这段话翻译一下:

这个 Power-up Rem 用于将自定义CSS添加到您的知识库中。任何下级 CSS 代码块中的样式都将被全局应用。可以通过在代码块的任何上级Rem上标记 “finished” todo 框来禁用代码块。

警告!仅从您信任的来源添加CSS。

a74d6549afe44c85ee6f021f4aec84a9ǒ

举个例子:

这是一段示例 CSS,作用为将所有文本的颜色都改为红色(请避免使用这种糟糕的代码)。

目前这段代码的上级Rem(即“Red Text”)是被勾选的(即 TODO 状态为“finished”)可以看到,目前这段代码未生效。👇

51a50465a11231e618a066e936de7368

当我们取消勾选时,这段 CSS 代码开始全局生效,所有文字变为红色。👇

j8b20f030d47f834786232ebe50ff655e

🌈RemNote的CSS主题分享

欢迎大家通过RemNote的分享功能分享主题到下方

(如何分享笔记和使用CSS威廉的RemNote专栏都有写过)

  • 下边主题分享人:小汤园叁號

c3a2a6974cd0b426b3c355ea0b871a7c

CSS:只修改背景色

代码作者:夜伴轻雨、Jacey、开源AI

body {

background: #EAEAEF;

}

#document {

background: #EAEAEF;

}

.hierarchy-editor-toolbar-container--opened #hierarchy-editor-toolbar {

border-color: transparent;

border-top: solid #EAEAEF;

background-color: #EAEAEF;

border-width: thin;

white-space: nowrap;

display: flex;

align-items: center;

height: 100%;

padding-left: 15px;

padding-right: 15px;

}

效果:

8eb7b23eb7963f8fbc1cd6e35aedcc82

CSS:只修改背景色

代码作者:夜伴轻雨、Jacey、开源AI body { background: #EAEAEF; } #document { background: #EAEAEF; } .hierarchy-editor-toolbar-container--opened #hierarchy-editor-toolbar { border-color: transparent; border-top: solid #EAEAEF; background-color: #EAEAEF; border-width: thin; white-space: nowrap; display: flex; align-items: center; height: 100%; padding-left: 15px; padding-right: 15px; } 效果:

隐藏Tag(圆点指示)鼠标掠过(hover)的时候显现(by Jacey)

tag隐藏后的样式大家可以凭自己喜好发挥的,这里只是提供一种思路。

这里顺便推荐一个我个人很喜欢的选色网站:https://coolors.co/

.hierarchy-editor__tag-bar__tag {

border-radius: 8px;

padding: 6px 3px;

font-size: 0px;/* 隐藏tag文字 */

opacity: 1;

margin-top: 0px;

background-color: #C3D9D3;/* 指示圆点颜色会根据tag背景色而变化 */

}

/* 以下一段是鼠标掠过指示圆点后tag显示的样式,其实就是tag没被隐藏之前的样式,可依据各人使用的css主题样式设置参数 */

.hierarchy-editor__tag-bar__tag:hover {

border-radius: 4px;

color: var(--font-c);

padding: 1px 5px;

font-size: 14px;

opacity: 1;

margin-top: 5px;

background-color: #C3D9D3;/* 依据自己使用的主题设置tag背景色 */

}

CSS: 用高亮按钮设置颜色(by Jacey)

效果如下:

284b6316dc79a29eb6aa4a6bb75f26a3

上面一行是平时高亮按钮产生的效果。

下面一行,对这一行rem添加"text color”的tag以后,再对选中的文字使用高亮按钮,改变的不是背景色,而是文字颜色。

注:由于软件只给出6个高亮按钮,所以一个rem里最多只能设置6种(颜色)样式,因为不同tag激活的颜色样式不能在同一个rem里混合出现。(当然了平时使用一般一行最多两三种颜色也就够了)

思路拓展:Remnote内用tag可以激活各种自定义样式。颜色方面还可以设置"light-highlight"一套颜色,"dark-highlight"一套颜色,“活泼色系”、“办公色系”等等等等。使用时用对应的tag激活样式即可。也可以直接将自己常用的样式设置为默认,而将系统默认的样式设置为需tag激活。

下面所列css代码实现的是:将样式应用到打上tag的“当前rem”。

如果将代码中的data-rem-tags替换成data-rem-container-tags则可以将样式应用范围扩大到打上tag的“当前rem及其所有子级”。

/* var(--main-background-c)是编辑界面的背景色,请各位按实际使用调整 */

[data-rem-tags~="text-color"] .highlight-color--red {

background-color: var(--main-background-c)!important ;

color:#E61717;

}

[data-rem-tags~="text-color"] .highlight-color--orange {

background-color: var(--main-background-c)!important ;

color:#F28D00;

}

[data-rem-tags~="text-color"] .highlight-color--yellow {

background-color: var(--main-background-c)!important ;

color:#D9CA00;

}

[data-rem-tags~="text-color"] .highlight-color--green {

background-color: var(--main-background-c)!important ;

color:#94BF1D;

}

[data-rem-tags~="text-color"] .highlight-color--blue {

background-color: var(--main-background-c)!important ;

color:#5C91E6;

}

[data-rem-tags~="text-color"] .highlight-color--purple {

background-color: var(--main-background-c)!important ;

color:#9C7ACC;

}

CSS:修改字体/Font的一些注意事项(by Jacey)

总结一下自己和群友在字体设置方面的经验教训。有些小细节没顾到字体就无法生效。

  1. 首先确保你的电脑上已经安装了你想使用的字体,windows电脑可以到C:\Windows\Fonts文件夹中查看。如果没有安装,可以从网上下载字体文件(如果下载下来的是个压缩包,就先解压缩),将需要的字体文件拖动/复制粘贴到上述Fonts文件夹中,系统会自动安装。

  2. 修改字体要用到的代码如下。

/* (Header + 正文)所有文字字体 */

.rem-text {

font-size: 17px;/*字号/文字大小*/

font-family: "Vanilla Twilight Script";/*字体样式*/

line-height: 1.6;/*行间距*/

color: black; /*文字颜色*/

opacity:1; /*文字透明度,0-1之间。*/

}

/* 正文(除Header外的)字体 */

/* 选择器如下。具体设置按上面的例子自行往{ }里面填 */

.rem-text:not(.rem-header--1):not(.rem-header--2):not(.rem-header--3) {

}

/* 分别设置1、2、3级Header文字样式 */

#hierarchy-editor .rem-header--1 {

}

#hierarchy-editor .rem-header--2 {

}

#hierarchy-editor .rem-header--3 {

}

  1. 注意事项:

    1. 选择器代码要打完整,不要漏了“.”点号,也不要多出空格。小白就直接复制粘贴比较保险。

    2. 字体(font-family)的名称,一定要填写跟你C:\Windows\Fonts里你喜欢的字体文件一模一样的名称,而不是下载网站上的字体名。比如上面例子里的"Vanilla Twilight Script"字体,光按照网站上的输入"Vanilla Twilight"就无法起作用。

    3. 包含多个单词的字体名称要用""引用起来。

    4. 可以填写多个字体名称,中间用(英文的)逗号隔开。系统识别不了第一个就会继续识别应用第二个,以此类推。

      1. 应用场景:第一位放英文字体,第二位放中文字体。这样软件里输入英文就会适配到第一位的英文字体;如果打中文字,由于英文字体适配不了,就会适配到第二位设置的中文字体样式。
    5. (2021.06.29-09:48:52由Focus补充)假如说按照上面的设置字体依然不起作用的话,那么可以考虑一下是不是自己的字体CSS代码段与其他的CSS代码段冲突了,可以只保留这一个CSS代码,而将其他的关闭掉。

      比如我的这个字体CSS代码与暗黑主题相冲突了,那么我要么将暗黑主题来关闭,要么将字体CSS代码放到暗黑主题后面,就不会再有这个问题了。

CSS: 隐藏外部链接,hover时显示链接名称(by Jacey)

在笔记里经常会插入外部网址链接,或者zotero和bookxnote的格式的外部回链(用于直接跳转)。此方法通过修改linknode的css将所有外部链接都隐藏为一个浅色小点,鼠标掠过时恢复显示链接名称。7f1fc09ada1cc0d6b8ff6a261a00a088

/* 外部链接 */

.LinkNode {

text-decoration: none;

opacity: 0.1;/* 透明度,几近透明 */

font-size: 0px;/* 隐藏文字 */

background-color: var(--main-link-c);/* 设置自己喜欢的颜色 */

padding-left: 5px;/* 调节padding参数,以设置圆点大小、形状 */

padding-right: 5px;

padding-top: 10px;

padding-bottom: 1px;

margin-left: 10px;

border-radius: 100%;

}

/* hover时恢复显示链接名称 */

.LinkNode:hover {

opacity: 1;

text-decoration: underline;

font-size: 17px;

color: var(--main-link-c);/* 设置自己喜欢的颜色 */

background-color: transparent;

}

.LinkNode img{display:none} /* 隐藏外部链接的图标 */

把 var(--main-link-c) 替换成具体颜色,比如red,

或者加上 :root { --main-link-c:red;}

补充用法:上面的css使得所有的外部link都隐藏了,但是有时候我们可能就是想要显示链接的名称。这个时候只要给这个link的所在rem打上一个show link title的tag,就可以显示link名称了。

css代码如下

/*打这个tag以后,让外部链接的名称文字一直显示 */

[data-rem-tags~="show-link-title"] .LinkNode {

opacity: 1;

text-decoration: underline;

font-size: 17px;

color: var(--main-link-c); /*这里设置你喜欢的文字颜色*/

background-color: transparent;

}

CSS:修改(search) Portal/面包屑文字样式 (by Jacey)

官方论坛上有人发过统一修改Portal和Search Portal路径的CSS:如下

/* Hide/modify the hierarchy of each rem in portals (from liberated_potato) */

.rem-container--not-included-in-document-scope > .rem-text{

color : #999; /* change hierarchy color */

font-size: 10px; /* change hierarchy font size */

font-style: italic;

letter-spacing: var(--semiwide-font-spacing);

/*display :none;*/ /* uncomment this to hide the hierarchy */ }

但我个人认为portal和search portal使用场景和功能都不一样,需要更细节化的差异设置,所以我自己用的CSS分享如下。已做注释,大家可以自定义使用。

P.S.: 个人建议不要彻底隐藏路径信息,它是remnote“块嵌入”的一大特色,一眼就能知道这条信息从属于那篇文章/视频等等。如果觉得它碍眼,可以将它字号调小、颜色调浅,不占视野。

For Portal only:

/*只改变portal里的路径信息的外观*/

#hierarchy-editor .portal-tree-node .rem-container--not-included-in-document-scope > .rem-text{

color : #999;

font-size: 10px;

font-style: italic;

opacity:1;

display: ; /* 如果冒号后填none,直接完全隐藏路径文字 */

}

/*hover路径文字后的字色设置*/

#hierarchy-editor .portal-tree-node .rem-container--not-included-in-document-scope > .rem-text:hover {

color : #999;

font-size: 10px;

font-style: normal;

opacity:1;

display : ;

}

For Search Portal only:

/*只修饰Search Portal里的路径信息*/

#hierarchy-editor .search-portal-tree-node .rem-container--not-included-in-document-scope > .rem-text{ /*search portal路径文字属性设置*/

color : #999; /* 颜色浅一些 */

font-size: 10px; /* 字号小一些 */

font-style: italic;

opacity:0.5;/* 透明度调低(hover后恢复) */

letter-spacing: ;

display: ; /* 如果冒号后填none,直接完全隐藏路径文字 */

}

/*hover路径后颜色变深更易阅读*/

#hierarchy-editor .search-portal-tree-node .rem-container--not-included-in-document-scope > .rem-text:hover {

font-style: normal;

opacity:1;

display : ;

}

HTML JS入门教程

  • 有高级定制需求的可看一下这些教程,好的入门后再学习高级内容会很轻松。

  • 感兴趣的朋友可以按 1、html 2、css 3、JS的顺序学习,学会后就可以很好的自定义主题,简单为RN写一些小插件。

  • 61193fdf51b47af54edf62338580021c

如何更新你分享的RemNote笔记

b7ff05d89157956f2b8ee55f2afba607

用Export分享后的笔记只需要点Reshare(上图)就可以进行内容更新。

必备的CSS能解决一些问题

分享人:Seagull

1、解决窗口非最大化时大纲···消失的问题

2、去除了官方log

  1. 面包屑变成灰色更好看

/*-------主界面-------*/

/*消除主界面左侧

余边距*/

#thinking-trail-history { width: 0; height: 100%; z-index: 6!important; }

/*解决非全屏大纲左侧···被隐藏的问题*/

#multiple-windows .

mutil

ple-windows__document{ padding-left: 30px; }

/*-------侧边栏-------*/

/*左上角log隐藏*/

#document-sidebar_top #logo img { height: 0; margin: 10px 0 7px; }

/*取消log的多余空间*/

#document-sidebar_top #logo { font-size: 0em; font-weight: 700; text-align: center; margin-bottom: 2px; color: rgba(25,25,25,.8)!important; }

/*左上角库标志变灰*/

#document-sidebar__account-capsule #document-sidebar__account-capsule__text{ background-color: #c9c9c9; }

/*-------面包屑-------*/

/*点点成灰色*/

#thinking-trail-history .thinking-trail-history__document .thinking-trail-history__document-dot{ background-color: #cacaca; }

#thinking-trail-history .thinking-trail-history__document .thinking-trail-history__children-bar{ border: .8px solid #cacaca; }

#thinking-trail-history .thinking-trail-history__document .thinking-trail-history__document-height-offset{ background-color: #cacaca; }

/*当前的点点淡蓝灰色*/

#thinking-trail-history .thinking-trail-history__document-dot--active { background-color: #8cc1ff!important; }

免费版如何输入emoji(表情符号)

win10平台使用微软拼音输入法 按win+. 快捷键就可以输入表情

win7系统可以用搜狗输入法输入emoji

c3e442cda59cfa0b7f67bb4fb3e95598

免费版如何使用别名功能

之前的网友提供了 quicker 的方案,但其实没有那么复杂,直接 [[aliases 找到那个power up输入就好了 https://getquicker.net/sharedaction?code=876d12ff-d73c-47cf-526c-08d8deaca81b

免费版PDF功能代替方案

免费版anki代替方案

原理:https://zhuanlan.zhihu.com/p/26745DJ1435

(举一反三看)

快捷动作 :https://getquicker.net/Sharedaction?code=32a1da42-229d-4bf7-e9c2-08d8e554e33d

使用键盘大师临时解决Mac端搜索和新建笔记的Bug

6de16553eb11dd5844de29ad1d855821a9bdb4313b722e9d070501cc1710959al

夜伴轻雨的B站RemNote教程

更傻瓜更好用本地建站工具chfs

  • 更傻瓜更好用的本地建站工具chfs(Remnote本地库用户非常适用)--20210331114359重写

    • 如果看不懂本文,你可参考一下RemNote 专栏里有关图床,本地库之类的相关文章。

    • 适用用户

      • Remnote本地库用户,而且使用本地资源文件
    • 为什么推荐chfs?

      • 1. 之前其他人分享的http-server本地建站,使用图片会存在闪图的问题

        走file协议不会闪图,但无法自动读取html文件内的网页标题,显示效果太抽象

      • 5f51088bd3c77929981b8b2048b1b79b

      • 3. 使用chfs可以解决图片和html文件的问题,而且chfs使用很傻瓜式

  • 注意: chfs 虽然是跨平台支持 (支持主流平台:Windows,Linux和Mac),但只有Windows有GUI程序,也就是有界面的程序,这种使用起来最傻瓜最方便。笔者Win10用户,所以教程是Win10下GUI程序的使用指南

  • 9f834fad7595cc43b65a2b38b1405651

  • 正文详解步骤

    • 1. 去官方网站下载 http://iscute.cn/chfs GUI程序

      解压后只有一个exe文件,新建一个文件夹(名字随便取没关系,把它放进去),以后给chfs增加新东西的时候,方便放在一起管理

    • 3. 双击启动后,先观察左上角是正方形还是三角形。

      • 如果是三角形,表示没启动,右边也会显示“服务未运行”,点一下变成正方形即可。0c394cb4956b0c15a087c62f3a0c63a4

      • 变成正方形后,右边会有website之类的信息出来

      • 451960e80de5047f3f025b4385f2b193

      如上图,再看看“随软件启动运行服务”的勾打上没?没有的话,就勾上吧。右上角点击三横杠,勾上“开机启动”

      • 223675c748ca8dbf07bd394fd6b00f41

      因为默认80端口,会跟其他软件的服务有可能产生冲突,建议改成其他端口,比如8080。

      • 先停止服务,点左上角的,变成三角形就是停止了。然后点“监听端口”,修改80到8080。

      • b15c4ea4b54a8bc30571cc922107182c

    • 6. 因为本工具本来是个局域网建站共享工具,所以我们要修改共享目录。

      • 默认的共享目录是chfs.exe所在的文件夹。

      • 先添加 Remonote的本地资源文件夹(具体看你个人放到哪里,反正没关系)。

        • 比如我的资源文件都放到myfiles下(下面有5个子分类),所以我把myfiles进行共享

        • f5f5cdf02d8a4d5aa2a0f07ea078b510

        • 6c68d5e87038a7ee332fe70c06d3d08a

    • 7. 删除chfs所在的文件夹

      • 73471b3210ccb4857a52cc753c1be686
    • 8. 然后左上角,启动服务器。

      • 可以看到右边的绿字出来了,网址是可以点击的。鼠标移动上去还有二维码,方便手机访问。可以自己试试看访问效果。(比如把电脑上的电影共享一下,就可以直接在手机端看了)

        • 06e3304dc89a5ea4d52de22de0c54626
      • 对于Remnote本地库用户,用127.0.0.1:8080也同样可以访问这个本地站,网站还比较美观。

      • 配合我的quicker动作 加戳类移搞地址 - 已分享的动作 - Quicker 也主要用这个127.0.0.1:8080 做头来获取地址

    • 9. 127.0.0.1:8080 在浏览器登录后,界面一看就懂怎么操作了,里面全是跟本地文件夹对应的结构

      • 3e3bcffc1a98f3efc2899015a0f3d259
    • 10. 复制网址

    • 不使用其他工具的情况下有两种方式

    • 第一种,随便打开自己想要粘贴的文件,比如一个图片,打开后,复制浏览器里的网址贴到remnote里就可以了

    • 特别注意:因为直接点击pdf,浏览器如果有pdf阅读插件,会自动开始阅读,所以pdf文件用第二种方式复制链接

    • eb1031d128d18ba858e083deef198341

    • 第二种方式,点击二维码小图标,点复制链接按钮

    • 1ae5c6fd00405a92f8b191e7864c39ee

    • 11. 更方便的管理文件并得到地址的方式:使用我的quicker动作

      • 以上两种复制方式都比较繁琐,需要先将文件放入你的资源文件夹里面,但不需要其他多余的工具。

      • 使用我的quicker动作不用管你的文件在电脑的任何地方,只管选中文件,使用动作,自动添加时间戳,根据扩展名分类移动到不同的指定文件夹,并复制好地址到你的剪贴板,你只管粘贴就行。

      • 具体说明看quicker页面说明,有多个可选功能项 加戳类移搞地址 - 已分享的动作 - Quicker

      普通用户到这里就可以了,下面是关于限制访问的。如果你不是自己在家用,而是在公司局域网之类的,下面接着看。

      因为这个工具本来是用来局域网共享用的,可以上传下载文件,可以在线观看视频。所以只要有局域网Ip,其他局域网机器都能访问,比如用手机访问。所以需要限制一下访问ip。

    • 同样一下先停止服务,然后如图操作,“账户控制”-“白名单”-填入“127.0.0.1”。只让127.0.0.1访问,也是只有自己当前的机器能访问。

    • 5bf12e0601f64fc3e376e6d51c7f7197

      还有很多其他功能,Remnote本地库用户不需要,自己去官网学习吧。比如进行更深的账号管理和权限管理,可以给局域网不同用户分配不同的访问权限。

配套Quicker动作

加戳类移搞地址(分类文件并把地址放入剪贴板)

https://getquicker.net/sharedaction?code=aa7cb431-4b3c-4b4e-bc62-08d8f2aa78f4

清除背后灵(在Remnote页面直接删库里的对应文件,避免垃圾文件堆积)

https://getquicker.net/sharedaction?code=56dd1d86-ca68-4248-afd4-08d8f6743496

截图保存chfs化(截图或者右键复制图片,生成本地图片并把地址放入剪贴板)

https://getquicker.net/Sharedaction?code=aab051b5-0377-4dde-b338-08d8f89a044b&fromMyShare=True

以上三个动作的一套连招,在使用本地图库的场景下很实用很方便了。

补充Quicker动作:

将选中的截图上传到基于chfs 构建的图床, 并返回上传图片地址到剪切板

https://getquicker.net/sharedaction?code=a5f0a606-b3e3-424b-9824-08d8f4a77a77

将选中的文件上传到基于chfs 构建的服务器, 并返回上传文件地址到剪切板

https://getquicker.net/sharedaction?code=c79fe4aa-265d-478c-982b-08d8f4a77a77

AutoHotkey直接自动上传图片chfs服务器,并粘贴图片地址到剪切板

  • 使用软件

  • 需要修改的地方,只有2处

    • Snipaste

      • Snipaste的输出选项中,将自动保存打开,并将原自动保存输出地址设置为picture后面再加一个Snipaste,并将图片保存类型设置为jpg,可以直接贴出我的设置目录:

      • C:/Users/Lenovo/Pictures/Snipaste/Snipaste_$yyyy-MM-dd_HH-mm-ss$ .jpg

      • a0d2230cffeb2b8d7b3a87b00177f7a7

    • AutoHotkey

      • 若是Snipaste完全按照上面的配置参数进行设置的,

        • 那么只需要改一处地方的源码,就是dest_path

        • 08c301c574b069f4f71ad825b3bebbf5

        • 将其设置为自己chfs服务器中存放图片的路径即可

      • 若是Snipaste中的路径不一致

        • 那么需要修改的地址一是上面的dest_path

        • 二则需要将Snipaste_Pic_dir设置为自己的Snipaste自动保存图片的地址即可,例如你的Snipaste自动保存文件夹是放在D盘的images目录下,按照下面的格式修改即可

          • 34f14163e1284ad9bcee40cb5d17f226
  • 可以实现的效果+使用方法

    • 使用Snipaste正常截图,然后在RemNote中按Alt+V即可自动上传图片到本地图床chfs(Ctrl+V粘贴图片的功能不受影响,还是粘贴的原图),这样在用Alt+V粘贴的时候,直接粘贴的就是图片的本地地址,整个过程用户完全感受不到,非常丝滑。而且这个脚本可以限制在RemNote的这个软件中使用,其他地方Alt+V的功能不受影响。6addf41b6b9412144d3b6326a0b0f123

    • 这个脚本可以正常使用的前提是你已经正常安装了chfs服务器,并且上面的需要修改的地方全部修改成自己对应的参数了

  • 脚本资源

  • 对应的蓝奏云链接

  • !AutoHotkey_chfs.ahk.txt - 蓝奏云

  • 下载下来后,将软件后缀名中的txt,去掉即可。

RemNote引用([[)显示“面包屑”的可能原因

  • 下边内容分享/更新人:糖油粑粑(20210331010028)

  • **问题:**使用“[[”引用方式时,引用内容有时会显示为“面包屑”样式,如下图右侧的两个红色标注框所示(Spaced Reptition;Forgetting Curve)。

4baada7d2c9d5859e9ff8d0d4349370e

  • 原因:

    • “Rem”的层级结构是最直接的原因。例如,上图中将层级结构拉平,则引用内容不会显示“面包屑”。

cde96c131a2d52d1da346bf348c26e5e

  • 另外,对于多层级结构(如下图红色标注框所示)

15641ad54365adbec7f0a508010387a7

9b383456c84a94e44d747d82402fc9fd

若将被引用内容调整为『Concept』对象,则引用内容也不会显示“面包屑”。

8daa6fd20b5f6b4fbdfd274f9956736a

  • 下面内容分享/更新人:小二,上酒!(20210404101455)

  • 对于【Universal Descriptor】显示面包屑问题,如果【Universal Descriptor】单独作为一个【Rem】,那么引用它的children将会显示面包屑,这时候需要在【Universal Descriptor】后面加上一点字符就可以解决。

4e29df1b5e50631bce370a92f1f40604

  • 关于引用多级列表下级元素显示面包屑的问题,RN中引用父级只有两个以下字符的【Children】会显示父级,三个及以上就不会。中英文都一样

9b24868910f5fcd0e136009870c3ca84

  • 下边内容分享/更新人:Focus(2021.04.04-10:57:09)

  • 引用中的面包屑路径显示问题

  • 路径的次上一级是否引用了其他Rem或者universal Descriptor

  • 没有引用

  • 次上一级是否少于3个字符

  • 少于3个字符

  • 会产生面包屑路径

16bffca4c20b13db3501ea9ab7fc5345

  • 多于3个字符

  • 不会产生面包屑路径

26f87f8a3a9896afe2f4fd47756fa8e1

  • 引用了

  • 引用的Rem后面是否有其他字符

  • 没有其他任意字符

  • 会产生面包屑路径

96630f5bb916189cc9368cc799269d96

  • 有其他任意字符

  • 不会产生面包屑路径

06280d1654bb95715bdd1f783c46c349

通过CSS Tag 对单个Rem 字体的样式修改

分享人:Don't Judge

效果预览:

09a295212aa094c0b2593ff421dbc507f2214119e8dd4512d7737fa194dafc91

如下:

[data-rem-container-tags~="text-style"] > div:first-child .rem-text > div {

text-align:center;

font-size:40px;

font-family:宋体;

font-weight:bold;

}

更多样式自行探索。

补充:

仔细观察这段代码和示例图片就会发现,

(Text Style)和代码中的名称(text-style)是不一致的,目前发现的规则如下:

  1. 代码内的字母必须全部为小写

  2. 对应Tag名中的空格用连字符(减号)代替

🗂️CSS片段分享

以下 CSS 相关内容已转到 GitHub WikiCustom CSS(自定义 CSS)专区 (有目录,便于查看)

分享人:Don't Judge

**说明:**下面给出的十几个CSS我没有全部启用,大部分是从Remnote论坛和RemNote Library 里找到的,没做说明的部分就是从libray里直接复制的。**以下内容默认你了解如何使用并插入Custom CSS,所以只给出了CSS代码。**请根据需求采用,全部用上会冲突的。

部分效果展示

9f5c64a40c88801bbb154ab867d4b597

👆实际启用的CSS如下👇

e4028c107ef3d2f74cd3911b4a4b7a8f

  1. 大号复习窗口(原本的窗口放大了也太小,从论坛找到一个,改小了一点)

64306b4faa5a30597f95793da505a2bf

CSS:

.QueueDesktop .Queue--big {

height: calc(100vh - 200px);

width: calc(100vw - 700px);

max-height: unset;

position: relative;

display: flex;

flex-direction: column;

}

.QueueDesktop .Queue--big .spacedRepetition,

.QueueDesktop .Queue--big .spacedRepetition #spacedRepetitionContent {

width: 100%;

height: 100%;

max-width: unset;

max-height: unset;

}

  1. 修改标签底色

.hierarchy-editor__tag-bar__tag {

background-color: #F1F1F1;

}

  1. 界面字体大小(不只左边,只是目的是改左边的字体大小)

    ea9b8b618a46a23995d91228ea0daec7

    CSS:

body {

font-size: 15px;}

  1. Rem字体和标题字体加大,一级标题样式修改

    facf16644aa2027d00247ded81bae3dc

    CSS:

div {

font-size:1em;

}

.rem-text {

font-size:17px;

}

.rem-header--1, { background:transparent; font-size:23px; } .rem-header--1:after, { content:''; display:block; width:97%; margin-top:-5px; border-bottom: 2px solid #ddd; }

.rem-header--2 {

font-size:21px;

}

.rem-header--3 {

font-size:19px;

}

👆补充:如有需要,可添加line-height属性调整行间距。

  1. 更浅的高亮颜色(加圆角)

    虽然在配置CSS时我们发现高亮都是有对应的颜色名的,但在悬浮的选择窗口中会根据实际配置的颜色显示,名称统一是Highlight👇,所以不用担心出现选择错颜色的问题

    a9a31cf53862e03331fc471c268d4969d93eeb51b122ca56d37363b9d41d7619

    CSS:

.highlight-color--red {

background-color: #feeeed;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--orange {

background-color: #ffecca;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--yellow {

background-color: #ffffb7;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--blue {

background-color: #e7fbff;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--green {

background-color: #eafcd2;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--purple {

background-color: #f4ecff;

padding: 0px 5px;

border-radius: 10px;

}

.rem-text {

padding-left: 20px!important;

}

  1. 更深的高亮颜色(加圆角)

.highlight-color--red {

background-color: #ffb6b6;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--orange {

background-color: #ffd9b6;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--yellow {

background-color: #fffab6;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--blue {

background-color: #b6e9ff;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--green {

background-color: #cdffb6;

padding: 0px 5px;

border-radius: 10px;

}

.highlight-color--purple {

background-color: #bab6ff;

padding: 0px 5px;

border-radius: 10px;

}

.rem-text {

padding-left: 20px!important;

}

  1. 高亮样式改成改变文本颜色(可以和自定义的高亮颜色同时生效)

    设置高亮时,显示为改变文本颜色而不是设置高亮标记(幕布的用户应该比较习惯这种给字体变颜色的样式)

    副作用:悬浮栏的颜色通过属性 background-color 识别,所以如果将高亮替换成文本颜色,将无法正常显示颜色👇,暂时没有解决方案。已修正,见👉 wiki 文档 修改高亮样式效果为改变文本颜色-v3

    cfced1e825b5a115a6b3e6ae7b621e9f

    e3e3462ec4fd8c5ae8ea321002a08b8a

    如果加上自定义颜色👇(如果保留高亮,悬浮窗显示的颜色为高亮底色)

    e9e9da7d5e2e2a681df7c8aa3266efd2CSS:

.highlight-color--red {

background-color: transparent;

color:#c00000;

}

.highlight-color--orange {

background-color: transparent;

color:#f15a22;

}

.highlight-color--yellow {

background-color: transparent;

color:#ffd400;

}

.highlight-color--blue {

background-color: transparent;

color:#009ad6;

}

.highlight-color--green {

background-color: transparent;

color:#1d953f;

}

.highlight-color--purple {

background-color: transparent;

color:#8552a1;

}

可选:highlight高亮一共六种颜色(算上引用quote就有7种)如果不是需要这么多种字体颜色,可以留下几种高亮。

比如前四种用作字体颜色(红、黄、蓝、绿)后两种颜色留给高亮(明黄、浅紫)

甚至可以把最后一种颜色配成浅灰色,用作注释性质的用途

  1. 标题(H1 H2 H3)居中(不需要修改字体大小就删掉font-size)

.rem-header--1{

text-align: center;

font-size: 25px;

}

.rem-header--2{

text-align: center;

font-size: 22px;

}

.rem-header--3{

text-align: center;

font-size: 19px;

}

  1. search portal 的浅浅灰色背景

    32c9c11df54e35ebb0084a4f255989fe095fdd61f0b18b7a472f97d3b38f8fdf

#hierarchy-editor .isSearchResult {

background-color: #F9F9F9;

border-radius: 5px;

}

  1. 一个字体族(这些字体应该是系统默认就有的,覆盖Windows、mac、Linux,总有一个有)

    a220d6054f95dc896f6f4f764bda453e

    CSS:

div { font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;}

  1. 缩小history pane / thinking trail history / 面包屑 / 历史记录(鬼知道这玩意儿该叫啥……)触发高度为10%,触发后恢复全高100%

    啥意思呢,就是👇鼠标放到绿色框上才触发history,移到红色部分是没事的,而默认是鼠标移到这一溜都会打开history451a28b661c8a53f488b2e16eaa2f907

    CSS:

/* Reduce the height of thinking trail to just 10% */

#thinking-trail-history, #thinking-trail-history__container {

height: 10%;

}

/* Upon hover, restore the height back to 100% */

#thinking-trail-history:hover , #thinking-trail-history:hover#thinking-trail-history__container {

height: inherit;

}

  1. 修改引用样式

    e4b7c06f80666ac0f6fd4e2c240dbffe

    CSS:

.quote{

color:#0216c9;

background-color: #f5f5ef; }

  1. 缩小滚动条宽度,换浅色(默认的滚动条贼粗贼丑)

    905270861e9d05e3160165653677d6e5

    CSS:

/*scrollbar config*/

/* width */

::-webkit-scrollbar {

width: 6px;

}

/* Track */

::-webkit-scrollbar-track {

background: #f5f5f5;

}

/* Handle */

::-webkit-scrollbar-thumb {

background: #ddd;

border-radius: 5px;

}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

background: #ccc;

}

  1. RemNote Library https://hannesfrank.github.io/remnote-library/#/library 里几个好用的插件👇

    69cd6129e3f66b11161a6723647117bb

  2. 👆Column Table(在library找不到了,可能是从论坛找的,这里给一份)

    d9052bf07ae3409f16819221ce7dac4e

    打上Tag👇

    84a4e8f9dda5b55f325f4f20522be8ebCSS:

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container {

border: 1px solid black;

}

/* fix collapsing borders */

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-child(n+2) {

border-left: unset;

margin-left: -1px;

}

/* remove indentation marker */

.tree-node-container[data-rem-container-tags~=column-table] .TreeNode {

border-left: unset !important;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > div:first-child {

border-bottom: 1px solid black;

font-weight: bold;

background-color: rgba(0,0,0,0.05);

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container > div:first-child:not(:focus-within) .descriptor_rem_type,

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container > div:first-child:not(:focus-within) .separator-symbol {

display: none;

}

#hierarchy-editor .tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > .TreeNode {

margin-left: 0;

padding-left: 0;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode:not(:hover) .rem-bullet__container {

visibility: hidden;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode {

display: grid;

/* auto jumps when toggling/writing rems */

/* grid-template-columns: auto auto auto; */

grid-auto-columns: 1fr;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-of-type(1) {

grid-column: 1;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-of-type(2) {

grid-column: 2;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-of-type(3) {

grid-column: 3;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-of-type(4) {

grid-column: 4;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-of-type(5) {

grid-column: 5;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-of-type(6) {

grid-column: 6;

}

  1. 微调Blockquote(灰色条条、灰色字体)

    7835b34cbdf1aee620b2ea3444d682d4

    Code:

/* Style taken from Cato Minor: https://medium.com/better-programming/roamext-roam-extended-a-little-piece-of-code-with-mighty-power-a18184c0c5be */

[data-rem-container-tags~="blockquote"] > div:first-child .rem-text > div {

background-color: var(--quote-background-color, rgb(244, 242, 242));

color:var(--quote-text-color, rgb(255, 204, 111));

border-left: var(--quote-border-width) solid

var(--quote-border-color, rgb(255, 204, 111));

padding: 3px 11px;

}

[data-rem-container-tags~="blockquotetree"] {

background-color: var(--quote-background-color, rgb(244, 242, 242));

color:var(--quote-text-color, rgb(255, 204, 111));

border-left: var(--quote-border-width) solid

var(--quote-border-color, rgb(255, 204, 111));

margin-left: calc(-6px - var(--quote-border-width));

padding: 3px 6px;

}

/* Reset background on selection. */

.selected-rem [data-rem-container-tags~="blockquotetree"],

.selected-rem

[data-rem-container-tags~="blockquote"]

> div:first-child

.rem-text

> div,

[data-rem-container-tags~="blockquotetree"].selected-rem,

[data-rem-container-tags~="blockquote"].selected-rem

> div:first-child

.rem-text

> div {

/* The default selection color is #cce2ff. I altered it slightly to have blockquotes still visible on selection. */

background-color: #dce2ff;

}

Customization:

:root {

--quote-background-color: rgb(255, 255, 255);

--quote-border-color: rgb(230, 230, 230);

--quote-text-color: rgb(150, 150, 150);

--quote-border-width: 5px; }

  1. 抬高 References的位置(有朋友嫌reference离内容太远,太下面了)

    17d4585f849effdfd733066684366cbf

    CSS:

.rem-hierarchy-bottom { height:100px; }

  1. 在 Column-Table 的基础上修改,支持标签定义宽距

    eced5442223d8f85832d3b8c3e87ead3

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container {

border: 1px solid black;

}

/* fix collapsing borders */

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container:nth-child(n+2) {

border-left: unset;

margin-left: -1px;

}

/* remove indentation marker */

.tree-node-container[data-rem-container-tags~=column-table] .TreeNode {

border-left: unset !important;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > div:first-child {

border-bottom: 1px solid black;

font-weight: bold;

background-color: rgba(0,0,0,0.05);

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container > div:first-child:not(:focus-within) .descriptor_rem_type,

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container > div:first-child:not(:focus-within) .separator-symbol {

display: none;

}

#hierarchy-editor .tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container > .TreeNode {

margin-left: 0;

padding-left: 0;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode:not(:hover) .rem-bullet__container {

visibility: hidden;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode {

display: grid;

/* auto jumps when toggling/writing rems */

grid-template-columns: repeat(12, 1fr);

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col1] {

grid-column: span 1;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col2] {

grid-column: span 2;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col3] {

grid-column: span 3;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col4] {

grid-column: span 4;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col5] {

grid-column: span 5;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col6] {

grid-column: span 6;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col7] {

grid-column: span 7;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col8] {

grid-column: span 8;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col9] {

grid-column: span 9;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col10] {

grid-column: span 10;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col11] {

grid-column: span 11;

}

.tree-node-container[data-rem-container-tags~=column-table] > .TreeNode > .tree-node-container[data-rem-container-tags=col12] {

grid-column: span 12;

}

  1. 花里胡哨的动态彩虹字

    参考CSS:https://blog.csdn.net/ChauncyWu/article/details/90211880

    或许可以用作广告位招租?洗剪吹了解一下👇

    一些需要强提醒的信息,用动态字可以很容易发现,或许是一种使用场景

    02682b1849a4118a70cd0a43f0456c8f

    可以自定义速度、方向、颜色。

    CSS:

[data-rem-container-tags~="rainbow"] > div:first-child .rem-text > div {

background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

-webkit-background-size: 200% 100%;

-webkit-animation: maskedAnimation 1s infinite linear; font-size: 18px;

}

@keyframes maskedAnimation {

0% {

background-position: 0 0;

}

100% {

background-position: -100% 0;

}

}

  1. 通过打Tag为当前Rem加删除线(这个CSS不知道是谁截图进我的列表里来的…所以没有Code)

    957e94438a65b6075a9a152f84230c78

    👆这种实现方式只能应用于整个Rem,可以参考第7点将文本高亮转换为字体颜色的方式,为某种高亮颜色配置CSS样式为删除线👇

    78e10e0cc631e1987d9980de2ecc8425

    CSS:

/* 牺牲一种高亮,获得一个删除线 */

.highlight-color--purple {

background-color: transparent!important;

color: #aaa;

text-decoration-line: line-through;

}

**因此引发的副作用:**已修正,见👉 wiki 文档 牺牲一种高亮颜色,获得一个删除线样式

  1. 一个设定,全局所有生效,所有应用了高亮的区域都会转变为删除线的样式

  2. 因为 background-color 被设为透明,悬浮栏中将无法正确显示颜色

  3. 下划线重定义(加大下划线和文字间的距离)

    需求背景:默认的下划线距离与文字的距离近👇,中文紧贴下划线,英文穿过下划线。

    2a906d61de02229c497e4e274baafec0

    为了加大距离,我们将下划线样式重定义,得到如下效果👇

    4820e26274efa24f87d028cb6032d374

    CSS:

.underline {

/* 隐藏默认下划线*/

text-decoration-line: none;

/* 通过设置边框伪装成下划线 */

border-bottom: 2px solid red;

/* 下划线和文字的距离 */

padding-bottom: 1px;

}

具体属性定义自行查询。

💡提醒1:因为使用边框伪装为下划线,所以如果高亮或者其他样式设置了圆角(border-radius),这个「下划线」就会弯起来,如下图的黄色高亮👇

96557d24a230f31c98be86361dd1c190

💡提醒2:下面这段CSS也能达到同样的目的,但是不能和加粗兼容(显示效果为加粗的文字不显示下划线,原因不明)

.underline {

text-decoration: red solid underline;/* 只想增加文字和下划线的距离,不定制样式可删除本行 */

text-underline-position: under;

}

  1. 在预览和引用 portal 中隐藏别名 alias

    https://forum.remnote.io/t/declutter-aliases-show-them-only-when-needed/2854

    举例:一个带别名的 Rem👇

    0f49c3dbfbf7f42d14a9cd4971068b6f

    默认情况下,将在预览和引用的 portal 中看到别名👇

    df23c704d620f0861d40b54deeb5de32

    使用 CSS 隐藏后👇

    959c00d814a2733b6195f7bd6c16eed3

    CSS:

/* Hide aliases unless parent of the alias is zoomed in */

.tree-node-container .tree-node-container .rem[data-rem-tags~="aliases"] {

display : none;

}

/* Hide aliases also inside full hover preview of

s */

#document-hover-preview__popup .tree-node-container .rem[data-rem-tags~="aliases"] {

display: none;

}

  1. 侧边批注(通过打 Tag 实现)

    从论坛 https://forum.remnote.io/t/sidenotes-or-marginnotes/1371 中找到的进行样式修改

    打 Tag 前👇

    34bbbda969f9accc385f5d159e4468ec

    通过打 Tag 进行侧边批注👇(一左一右两个tag:left sidenoteright

    3b887170b58a3add3deff3b53263279c

    CSS:

[data-rem-container-tags~="sidenoteleft"] {

width: 40%;

left: -50%;

position: absolute;

border-top:2px dotted #ddd;

border-bottom:2px dotted #ddd;

padding:10px 5px 15px 20px;

background: #fbfbfb;

border-radius:10px;

}

[data-rem-container-tags~="sidenoteright"] {

width: 45%;

right: -50%;

position: absolute;

border-top:2px dotted #ddd;

border-bottom:2px dotted #ddd;

padding:10px 5px 15px 20px;

background: #fbfbfb;

border-radius:10px;

}

  1. 高亮当前rem —— dapan

关键词:高亮;当前rem;三种

  1. 第一种 高亮rem

    效果

    e9bb394fa42c103a325af6ae9955b2c3d290c1cebae0cbb40581b4926cb61853

    代码

#hierarchy-editor .rem-container--focused .rem-bullet,.rem-bullet--in-list {

background-color: #A0C2DF;

}

#hierarchy-editor .rem-container--focused .rem-bullet, #hierarchy-editor .rem-container--focused .rem-bullet--in-list {

border-color: #A0C2DF;

}

  1. 第二种 高亮竖线

    效果

    154ff137866316ab7234b324be9718964289faaf0e0de34beaba244227ae6c5c

    代码

#hierarchy-editor .rem-container--focused {

background: linear-gradient(

90deg,

rgba(85,159,242,0.25) 1%,

rgba(85,205,196,0) 0%);

}

  1. 第三种 高亮边框

    效果

    685384c6428585f4a983c092691086b7

    49d62805b839240f7fff4217fb22f3c1

    代码

#hierarchy-editor .rem-container--focused {

border-radius: 5px;

box-shadow: 0px 0px 0px 1px #a0c0e0;

}

⌨️中文输入法输入[[ ##及搜索(ctrl+p)崩溃解决

(OneQuick & Quicker方案)

方法1:

分享人:Don't Judge

使用背景:Roam-like 应用触发引用的符号一般是 [[ ,但是在中文输入法下输入为【【,转为英文输入法再输入 [[ 一定程度上影响了输入流畅度,所以需要解决在中文输入法下输入【【自动转化为[[ 的办法。

解决办法:具体解决办法有用AutoHotkey和Quicker(付费功能)通过设置快捷键输入等。

如果你刚好有使用OneQuick,可以使用本方法👇

e41393c3783a60f7467dd0d5d4664cee

👆输入一样的两个 [ 就行,onequick的短语替换识别逻辑不区分中英符号(所以英文输入两个[[也是一样的)

效果:dd384c1cfb6f253e0c2925706120d932

替换逻辑为:将键入的内容删除,再输入替换为的内容(模拟键盘输入,而不是粘贴)

tips:应该没有人需要输入两个【 吧?实在需要的话,中间加个1(【1【),再删掉中间的1就行了。

❗副作用:注意一个问题,短语替换的方式为:「当检测到输入两个 [ 时,做两次退格操作,删除输入的两个 [ ,然后再输入两个 [ 」,因为 onequik 不识别到底是 【 还是 [,所以能在中文输入法下生效。但是,在英文输入法下,当你输入两个 [ 时,portal 的搜索框就出现了,而按照逻辑,这时候应该要做两次退格操作,那么就会产生一个问题:「首先一个退格,删除 portal 搜索框;第二个退格,删除一个字符;然后再输入两个 [,触发 portal 搜索框」

因此要使用本方法的前提是尽量不要英文输入法下触发 **[[。**要记得提前补一个符号,比如英文输入法下改为输入 1[[ ,另外,英文输入法下在一个空白 Rem 的头部输入 [[ 会导致退到上一个 Rem,逻辑和前面的描述原因一致,不再赘述。

💡这里提供一种解决方案:短语替换 [p👉**[[**

方法2:

使用Quicker(付费?)的文本指令重新映射也可以方便的做到RN的中文崩溃修正,

具体参考可以如下, 建议绑定RN进程

e4a02cfe203725c4767ad7fc9765b3bf

ae910af002f20f33fbd0e537190d3095

be89bd04775bb11be5f48451e4016494

ecbbe2a6bb4e9ee97187c5cf66a6b815

使用#1 输入 ## (英文输入法)

使用[1 替换输入 [[(英文输入法

使用pp 替换 ctrl + p 动作(推荐) 中文输入发下, 光标不激活也可以正常使用

f110b2fbc15f6f976e1b366a5fab5b9d

f6eec3d4c6b9013ceafdde1327af7df8

e7df2f2f01c589bdb24d28e0e32807e4

可以用上面免费的Onequick, 如下简化设置也可以

使用#1 输入 ## (英文输入法)

使用[1 替换输入 [[(英文输入法

504159f36e4ab48a4c493e9525f1e1f2

侧边栏(Sidebar)文件夹自定义

分享人:Don't Judge

背景介绍:

打开Settings→Sidebar→Customize Sidebar Sections 👇f235c2b28c998be9baa6e3efd56379b0

可以看到3个search portal,内容和左边Sidebar内容一致👇(直接×掉搜索框左边对应的列表就没了)5d29ef7b4ea569f1f0a44c2e1f3765b3

展开Pinned查看,可以发现,搜索参数是名为Pinned的一个power-up Rem👇

1821681e7acd142decba43667141e88b

点进去可以修改名称👇

dcbd8e13abf56ac3eeed670cde489942

自定义

所以自定义侧边栏的方式就是直接在Document Sidebar 里建立自己所需的search portal👇

40dc5706e414f6d2f6489b40c901e296

tips:直接在search portal里搜索文本👆,几乎必然得不到满意的搜索内容。建议使用搜索标签等方式调整适合自己的搜索方案。(软件可以解决一部分问题,但是对于内容的个性化管理总是需要使用者自己定制)

补充(Jacey):在Document Sidebar页面里,用Portal列出(自己想显示在左侧别栏的)任意Rem,也可以实现侧边栏条目的设置。

优点:这种方式较为灵活。可将任意条目显示在侧边栏。

缺点:是当前版本软件的bug,新打开软件的时候侧边栏有时会不能立刻读取到portal里列出的条目,有时候使用一会儿软件之后就好了。我自己的解决办法是将document sidebar也列在侧边栏,当侧边栏不显示内容的情况出现就点击一下进入到document sidebar页面一次,侧边栏显示立刻就好了。

不喜欢高亮,用彩字代替的CSS

方案一:

效果:彩色字,tag也用彩色字

955aefda1d675203ea57a3330db08b4b

CSS:

.highlight-color--red {

background-color: var(--main-background-c);

color: #E61717 !important;

}

/* 高亮按钮改彩色字 */

.highlight-color--orange {

background-color: var(--main-background-c);

color: #F28D00 !important;

}

.highlight-color--yellow {

background-color: var(--main-background-c);

color: #D9CA00 !important;

}

.highlight-color--green {

background-color: var(--main-background-c);

color: #94BF1D !important;

}

.highlight-color--blue {

background-color: var(--main-background-c);

color: #5C91E6 !important;

}

.highlight-color--purple {

background-color: var(--main-background-c);

color: #9C7ACC !important;

}

/* 给按钮添加彩字指示 */

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(11)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(12)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(13)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(14)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(15)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(16)>span::before {

content: "A";

}

.hierarchy-editor__tag-bar .highlight-color--red>span {

color: #E61717;

}

.hierarchy-editor__tag-bar .highlight-color--orange>span {

color: #F28D00;

}

.hierarchy-editor__tag-bar .highlight-color--yellow>span {

color: #D9CA00;

}

.hierarchy-editor__tag-bar .highlight-color--green>span {

color: #94BF1D;

}

.hierarchy-editor__tag-bar .highlight-color--blue>span {

color: #5C91E6;

}

.hierarchy-editor__tag-bar .highlight-color--purple>span {

color: #9C7ACC;

}

方案二:用彩色字,tag仍然是高亮

效果:a8f053594ac0366097a5eb584c4112e4

CSS代码:

/* 高亮按钮改彩色字 */

.highlight-color--red {

background-color: var(--main-background-c);

color: #E61717;

}

.highlight-color--orange {

background-color: var(--main-background-c);

color: #F28D00;

}

.highlight-color--yellow {

background-color: var(--main-background-c);

color: #D9CA00;

}

.highlight-color--green {

background-color: var(--main-background-c);

color: #94BF1D;

}

.highlight-color--blue {

background-color: var(--main-background-c);

color: #5C91E6;

}

.highlight-color--purple {

background-color: var(--main-background-c);

color: #9C7ACC;

}

/* 给按钮添加彩字指示 */

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(11)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(12)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(13)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(14)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(15)>span::before {

content: "A";

}

body>div.rich-text-editor__selected-text-menu>div>span:nth-child(16)>span::before {

content: "A";

}

/* 保留彩色Tag颜色 */

.hierarchy-editor__tag-bar span {

color: black;

}

.hierarchy-editor__tag-bar .highlight-color--red {

background-color: #E61717;

color: black;

}

.hierarchy-editor__tag-bar .highlight-color--orange {

background-color: #F28D00;

color: black;

}

.hierarchy-editor__tag-bar .highlight-color--yellow {

background-color: #D9CA00;

color: black;

}

.hierarchy-editor__tag-bar .highlight-color--green {

background-color: #94BF1D;

color: black;

}

.hierarchy-editor__tag-bar .highlight-color--blue {

background-color: #5C91E6;

color: black;

}

.hierarchy-editor__tag-bar .highlight-color--purple {

background-color: #9C7ACC;

color: black;

}

暗黑模式dark mode增加对比度

下边内容分享/更新人:开源AI(20210502102930)

/* ## 暗黑模式dark mode增加对比度 */

.dark-mode #document, .dark-mode, .dark-mode-background {

background-color: #ffffff;

color: #000000;

}

.dark-mode, .dark-mode-filter {

filter: invert(100%) hue-rotate(180deg);

}

/* 下面的代码是处理暗黑模式下的图片的,如果不喜欢可以去掉 */

.tumbnail--with-width.dark-mode,

.image-occlusion.dark-mode,

#image-viewer-popup > img.dark-mode{

filter: invert(0%);!important

}

隐藏非顶级Rem引用前的竖线

/* ## 隐藏非顶级Rem引用前的竖线*/

.rem-indented-indicator {

display : none;

}

隐藏非顶级Rem引用前的层级路径

下边内容分享/更新人:开源AI(20210501220001)

如果父Rem只有两个字的话,引用该Rem的时候会显示一个带有父Rem的路径,如下图所示:

89b26259de314c845399ab3c2f05c8d0

解决方法如下:设置->Interface->Add Custom CSS->Add Blank CSS Block,如下图所示:

db1d47cfbe52ea29da77db04559eb6e9

添加如下代码:

/* 隐藏面包屑 */

.rem-reference.button.rem-reference-link .gray {

display : none;

}

.rem-reference.button.rem-reference-link .join-arrow {

display : none;

}

.rem-indented-indicator {

display : none;

}

设置完成后的效果如下:

f522cebe786fab31a3e534fb730f277b

隐藏挖空cloze右边的倒三角形

代码作者:开源AI(202105061459)

/* 隐藏cloze右边的倒三角形 */

.tree-node-container:not(.rem-container--focused):not(:hover)

> div:first-child .cloze i{

display: none;

}

before(鼠标未放在该Rem上):

19d403691c409256b4d015711b0b4fe9

after(鼠标未放在该Rem上):

1ed7fed99240e442339ec71e757ac4b2

如果想始终隐藏(即使鼠标选中该Rem也隐藏)倒三角形按钮的话,就这样写:

/* 始终隐藏cloze右边的倒三角形 */

i.caret.square.down.icon.rich-text-editor__change-cloze-button {

display: none;

}

/* 始终隐藏cloze右边的倒三角形 */

div:first-child .cloze i, div:first-child .cloze + * i{

display: none;

}

另外建议在“始终隐藏cloze右边的倒三角形”这条CSS的标题后面加上一个好记的代码,比如666

a977e6d66a7c552c3bf389b6b534b44a

这样就可以通过快捷键ctrl + p快速搜索到这条CSS

865061bf0d48fc221bbc934d47da6a88

(tag as document将其钉在左侧栏Draft里也行)

以下内容于(202105071621)更新:

“始终隐藏cloze右边的倒三角形”的代码升级到2.0版本了,更方便

/* 始终隐藏cloze右边的倒三角形 */

/* 2.0版本:如需临时修改挖空的分组,直接在需要修改的Rem处打上标签333 */

.tree-node-container:not([data-rem-container-tags~="333"]) > div:first-child .cloze i{

display: none;

}

.tree-node-container:not([data-rem-container-tags~="333"]) > div:first-child .cloze + * i{

display: none;

}

合并中的多个连续挖空

代码作者:开源AI(202105061505)

以下代码是为了解决RemNote的bug而写的,如果你从来没遇到过这个bug那就不用管。这个bug是如果你设置的一个挖空中含有公式、引用、斜体(与普通字符同时存在)等,RN会自动将它们分开生成多个挖空。

/* 合并卡片中的多个连续挖空 */

.fill-in-the-blank + .fill-in-the-blank {

display: none;

}

before:

012f78f4ab11e2c902af9a929ac40e22

after:

38536de433614a987a13545c8b66b485

(参考:CSS 相邻兄弟选择器

该CSS已知bug及解决办法

如果两个挖空之间全是普通字符,没有带格式的字符(即斜体、粗体、高亮等)或者公式、引用等内容,那么卡片中后面的那个挖空将不会显示。比如下面这个例子,一共3个挖空,但卡片中只显示了前2个:

9fa2971c4a848e51d8100029cb0a1334

47bcfe067f6f413658d699fe20ec685e

解决办法就是,在两个挖空之间找到一个标点或空格,将其设置为斜体或粗体或高亮(可以自己修改CSS将其中一种高亮颜色改为白色)。修改后👇

6607d168105c903f17003aabe3035539

行间公式挖空下划线缩短

代码作者:开源AI (202105111633)

before:

4f0fe5469f49e250cf9f5b52cc0cc967

after:

95d2cc1801c2654c37c892dadcc9b396

该CSS存在的Bug: 可能会导致行内公式挖空的下划线不整齐,我认为该bug目前无解。如下图👇

fdcc7afe21d45a9af52263763ae4f4a8

该bug也存在于行间公式中,比如:

520a69067e19e7e0bc24645455be35be

解决办法就是在公式源码的外侧套一对花括号{ },然后就正常了:

eb5ed6ca5a786a607ef985b3f9dfbabf

/* ## 行间公式挖空下划线缩短 */

.cloze {

border-bottom: 1.0px solid #FF9C9F;

padding-bottom: .5px;

}

.latex-node.cloze {

border-bottom: none;

background-color: transparent;

}

.RichTextViewerLatex.cloze {

border-bottom: none;

background-color: transparent;

}

.latex-node.cloze span.base {

border-bottom: 1.0px solid #FF9C9F;

padding-bottom: .5px;

background-color: rgba(210,225,248,.35);

}

.RichTextViewerLatex.cloze span.base {

border-bottom: 1.0px solid #FF9C9F;

padding-bottom: .5px;

background-color: rgba(210,225,248,.35);

}

Mac桌面端中文输入法光标位移的不完美解决(官方解决了)

我不太会代码,想到一个使用keyboard maestro来解决的方案。主要解决方式是把中文输入端换成KM内置的……所以比较曲折,适合小段文字输入。

具体设置方式如下:

  • 一、新建一个Remnote的group,设置为桌面端的remnote app启动时,可以运行

    • d7c4a1245a7ed00fefc6534b9405d21a
  • 二、具体的运行设置,可以参考下图

  • c68a83c46f43d63b6ee9640d4963b946

    • 注意:这一段是我激活keyboard maestro内置输入器的关键词。同理也可以换成快捷键。ff6a48b48df1ad4de4862b17ec67369f

    • 最后的clipboard 0是为了把上一步输入进去的内容删掉,避免占用剪贴板。

    • 需要的也可以直接下载导入KM试试。链接: https://pan.baidu.com/s/1qJCCdFCc-z9JebRJ7ajSFQ 密码: qgd8

视频时间戳

RemNote利用YoutubeToRemNote插件产生YouTube## 视频时间戳

作者:Focus

图片比较多,粘贴起来比较麻烦,也为了不占用群协作文档的面积,先将其放到知乎了

https://zhuanlan.zhihu.com/p/372744428

美化多窗口模式

代码作者:。。。

2f244a8d6d1649e6beda861483a38fe4直接默认隐藏最舒服,默认一条横在那还是太丑了

a87861860baab071c607311499eacf9c

.mosaic-tile .mosaic-window-toolbar .mosaic-window-controls.bp3-button-group > button {

padding: 2px;

background: #fff;

border: 0;

cursor: pointer;

}

.mosaic-tile .mosaic-window-toolbar {

position: absolute;

right: 8px;

top: 4px;

box-shadow: 0 0 10px -3px rgb(0 0 0 / 55%), 0 0 1px 0px rgb(0 0 0 / 55%) !important;

opacity: 0;

width: 50px;

}

.mosaic-tile .mosaic-window-toolbar:hover {

opacity: 1;

width: unset;

}

.mosaic-tile .mosaic-window-toolbar .mosaic-window-title {

display: flex;

align-items: center;

justify-content: center;

padding-left: 8px;

}

.mosaic-tile .mosaic-window-toolbar .mosaic-window-title::before {

content: "\f0b2";

display: inline-block;

opacity: 1;

margin: 0 0.25rem 0 0;

width: 1.18em;

height: 1em;

font-family: Icons;

font-style: normal;

font-weight: 400;

text-decoration: inherit;

text-align: center;

font-size: 1em;

color: rgb(116, 120, 120);

}

多窗口模式开启后,背景色设置

代码作者:Jacey

多窗口模式开启后,背景色设置

.tile__document {

background-color: var(--main-background-c);

}

复习模式:在大纲正文中隐藏所有卡片背面

c45f1e9871f568038eb64ac77984d6c5

👉 点击此处获取CSS

Do your initial learning with active recall directly inside your notes. After that you will have an easier time in the queue.

You can recall Concepts, Descriptors, Questions and the items of Multilines, Lists and Sets.

Usage

  • Tag an ancestor of the rems you want to learn with `#Active Recall`. All answers below that rem will be hidden.

    • Note: Currently only the forwards direction is supported.

    • Create a rem with the text `Learned`.

    • You can hover over a rem or focus it to show the answer.

    • Tag it with `#Learned` to mark correctly recalled cards. Their answer will be permanently revealed.

    • It is convenient to copy this tag with Ctrl + Shift + S and just paste it into correctly recalled cards.

  • After your learning session you can delete the rem `Learned` and all tags will be deleted as well.

安装方法:

点击上面这个按钮,然后在Custom CSS界面末尾空白处直接粘贴 ,不用新建代码块。下图表示CSS代码正确添加👇9a3f9c2fe97fec203f8188e97f903563

7dbab93b4085c04a08eb1786b4a00d6b

如果发现有公式没有被遮挡完全的话,参考这个issue(官方已解决),在前3个CSS中添加代码:

color: transparent;

Clone this wiki locally