自动调整宽度的边注css

项目源地址:obsidian-sidenote-auto-adjust-module/README.zh-CN.md at master · crnkv/obsidian-sidenote-auto-adjust-module · GitHub

Sidenote Auto-Adjust Module.css可根据窗口可见区域的大小自动计算合适宽度数值,它们被记录记录在变量 --sidenote-width--sidenote-margin--sidenote-edgeout 里,供其它实现边注的css片段调用。

这些变量会考虑以下情况而自动适应:

  • “缩减栏宽”选项的开启与关闭(关闭时文档正文会占满可见区域,开启时文档行宽度会缩到 700px )
  • “显示行号”选项的开启与关闭(开启时行号栏会占用空间)
  • 在使用的是默认主题还是 Minimal 主题(后者会将文档行宽度改成 40rem )
  • 当使用 Minimal 主题时,当前文档属性中,是否设定了 Minimal 主题特别设计的 ‘max’ 类(cssclasses)(如添加了该属性, Minimal 主题会将文档行宽度改成 88% )
  • 当使用 Minimal 主题时,当前文档属性中,是否设定了 Minimal 主题特别设计的 ‘wide’ 类(cssclasses)(如添加了该属性, Minimal 主题会将文档行宽度改成 50rem )
  • 当前文档属性中,是否设定了本 SAAM 模块特别设计的 ‘leftsided’ / ‘rightsided’ 类(cssclasses)(如添加了该属性,本模块会将文档正文向左/右推移,留出右/左方更多的空间给边注)

注意:Sidenote Auto-Adjust Module.css必须与其它边注css配合使用方可生效,如你没有什么编程基础,则在下载Sidenote Auto-Adjust Module.css的同时,需下载Sidenote in Tufte-style using SAAM.cssStickynote in Callout-style using SAAM.css方可添加边注,关于后二者的区别和用法,详见下文

  • 每种写法都可在Style Settings插件中设置成全局靠右或靠左
  • 如需设置特定文档的方向,则在笔记属性的cssclasses中添加leftsided / rightsided值即可
  • 如需设置特定边注的方向,在对应提示词sidenotestickynoteaside后用-r-l指定即可:

建议用Quicker软件保存语法,以便快速输入
也可下载 templates for quick insert 路径下的四个模板文件配合Templater插件使用,记得打开插件的Automatic jump to cursor选项

Tufte-style Sidenotes

灵感来自 Tufte-CSS,生成极简主义的、小字体、无背景边注(sidenote),在实时预览模式和阅读模式都能用。
但与原风格略有不同的是:本css中并未区分"sidenote" 和 “marginnote”,在Tufte风格中,前者为自动带有连续编码的边注,后者为不带连续编码的边注。如用户需为引注编码,需要自行手动输入。

[!Example] Inline写法(示例中一切“”及其包裹的文字都只是解释性内容,需要删去)
例(可一键复制粘贴到笔记中查看效果)

人最宝贵的是生命。生命每个人只有一次。人的一生应当这样度过:当回忆往事的时候,他不会因为虚度年华而悔恨,也不会因为碌碌无为而羞愧;在临死的时候,他能够说:“我的整个生命和全部精力,都已经献给了世界上最壮丽的事业——为人类的解放而斗争。”<sup>1</sup><span class=sidenote> $^1$ <br/>——[[奥斯特洛夫斯基]], _钢铁是怎样炼成的_ </br>![](https://youimg1.c-ctrip.com/target/10040e00000075ucyA251.jpg) </span>
  • 正文 <sup></sup>:此处<sup>标签及其包裹的文字为可选项,被包裹的文字会被格式化为上标,充当引用序号之用
  • $^$处的两个$ ^及被包裹文字为可选项,^后的第一个字符会被格式化为上标,可用在边注开头充当引用序号之用
  • 边注中可用双链以及markdown语法
  • <br/>标签换行
  • 可利用![](url.jpg)添加外部图片链接,注意![]中不要写入任何内容

[!Example] Block写法
例(可一键复制粘贴到笔记中查看效果)

> [!sidenote]
> $^1$ ——[[George Lucas]], _Star Wars_
> ![](https://ts1.tc.mm.bing.net/th/id/R-C.52fc1a4909c5440da52ba78f7866e011?rik=pdy2J6VZcy9UfQ&riu=http%3a%2f%2fimg2.jiemian.com%2f101%2foriginal%2f20170504%2f14938685097204100.jpg&ehk=LhIeNDLQGsM8zOd%2bIELT%2bLc2UHSrZ%2fxG5MY6gsnJmqw%3d&risl=&pid=ImgRaw&r=0)
> 
> - 列表条目
>
> | 表格单元格 | 表格单元格 |
> | --------- | --------- |
> | 表格单元格 | 表格单元格 |

May the force be with you<sup>[1]</sup>
  • 注意边注内容所在的callout在要注释的文字之前,且需要空一行
  • 其它规则与inline写法一致

  • inline写法的优缺点
    • 优点:
      • 生成的边注(sidenote)会和引用它的正文锚点保持在同一行,从而实现精准定位
    • 缺点:
      • 需要依赖<br/>实现换行,且无法容纳如表格、列表、代码块等多行markdown特性
      • 其内部markdown语法只在阅读模式中渲染,在实时预览模式只显示成markdown源码
  • Block写法的优缺点:
    • 优点:
      • 源码更开阔
      • 可容纳如表格、列表、代码块等多行markdown特性
    • 缺点:
      • 生成的边注只能和段落的首行对齐

Callout-style Stickynotes

灵感来自于 sailKitexhuajin,生成保留了Callout的大部分外观风格,看上去更像是便利贴的边注
两种写法都能容纳多行markdown特性,同时适应阅读模式和实时预览模式,两者区别在于简化便利贴写法隐藏了标题,且行距更紧凑,而Callout写法占用的空间更多,且可使用各种callout类型

[!Example] 简化便利贴写法

> [!stickynote]
> $^1$ ——[[George Lucas]], _Star Wars_

May the force be with you<sup>[1]</sup>

[!Example] Callout写法

> [!warning|aside]- 标题:这是折叠注释,点击展开
> This is simply a warning
> - 列表条目 1
> - 列表条目 2

我我我

1 个赞

图挂了……看上去来自pkmer

因为pkmer的就是我发的,图是我从ob库直接发出来的,不知道为什么裂了