为了便于阅览,我将该文章分成若干部分,汇总如下:
第一次接触修改主题样式是在我使用 Typora 伪装 LaTeX 中文样式主题 时开始尝试的,这个样式目前小问题有点多,但是不耽误使用,而且还是很好看的,反正我已经 star 了。不过后来我还是换回了 github 主题,但是我也稍微添加了一些修改,以适应我的个人需求。
接下来我要说的就是我的一些比较重点的魔改的地方。这些魔改是在上面提到的伪装 LaTeX 主题及其 个性化设置 之外我自己摸索的。
标题自动序号
CSS 代码参见 Auto Numbering for Headings,我在这也贴出来。请注意,下面的代码可能并不完善,请大家在写文章时,尽量使标题符合层级次序,否则可能会有 bug。
如果有新手好奇这些代码该贴在哪里的话,请看下一小节 列表。
文本内容中
1 | /** initialize css counter */ |
TOC 中
1 | /* No link underlines in TOC */ |
来自 http://pastebin.com/NYugSbXk。
侧边栏大纲中
1 | .sidebar-content { |
来自 https://pastebin.com/XmYgBbaz。
列表
本节于 2025.01.04 重新编写。
如何修改样式?例:控制列表序号前间距
OK,我们现在有这么一段内容:
我感觉标号前的间距有点小了,该咋改呢?
按下组合键 Shift + F12(Windows/Linux)或 Shift + Command + F12(macOS),就能启动开发者工具窗口。点击下图右上的那个按钮,再把鼠标放到想要查看的元素上,就能显示出内外边距等信息。再点击一下就可以查看相应的样式(右下角):
我们点击下图中的加号,就可以写 CSS 代码,临时修改编辑器与文章的样式:
1 | ol.ol-list { |
这段代码的含义是,给所有的有序列表添加一个左边距,这个左边距是 20px。效果如下:
可以看到每层列表前面的空白都变大了。现在试验成功,我们可以把这段代码加到我们的 CSS 文件中,这样就可以永久生效了。
在 Typora 中点击左上角“文件”-“偏好设置”-“外观”-“打开主题文件夹”就能找到所有的 CSS 文件了。在“外观”界面中也可以看到现在选用的是什么主题文件。打开相应的文件,把上面的代码加进去,重新打开 Typora 就能看到效果了。
有序列表序号
当然,列表的序号也是可以修改的,这里不再赘述,直接搬过来吧:
1 | Numbers (default style) ol {list-style-type: decimal;} |
无序列表序号
嵌套列表序号修改
1 | ol { |
在 CSS 中,选择器 ol ol ol
用于定位嵌套三层的有序列表(<ol>
):
- 第一个
ol
表示任何<ol>
元素。 - 第二个
ol
表示直接或间接位于第一个<ol>
内的另一个<ol>
元素。 - 第三个
ol
则表示位于前两个<ol>
内的第三个<ol>
元素。
空格(也称为 后代组合符 或 后代选择器)用于分隔两个或多个选择器,表示后面的选择器是前面选择器的后代元素。被选中的元素不一定是它的直接子元素,可以是任何级别的嵌套元素。
空格不仅仅匹配直接子元素,而是匹配所有级别的后代元素。如果只想选择直接子元素,则应该使用 子选择器 >
。
下划线
默认的下划线样式就好像一条舔狗,死死地咬着文本不放,所以我给改了。我偶然发现这么一篇文章:自定义 Typora 的样式(这篇文章中还有其他有用的内容),照着里面的代码调了一下,修改下划线的代码在下面,效果在上面的图片里。
1 | u {/*处理下划线显示,对应快捷键Ctrl+U*/ |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
上图为 padding
那一行第三个数据调为 0px 和 1px 的区别,文字是对齐的。下划线的粗细设成 1.5px 是很对我的口味的。另外,修改超链接的下划线和修改文本下划线实际上是一样的,只要改 border-xxx
就行了。
文字对齐与打断
首先是标题的对齐,一二级整了个居中,如下图:
当然,大家也可以看到,最后一行那里,我把一二级标题下边的下划线搞掉了。
其次是正文内容的对齐,在默认样式中,正文是左对齐,右边就会犬牙交错参差不齐,我就给改了,在 css 文件中添加这么一段:
1 | #write p { |
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
当然在这种样式下,会出现一种很糟糕的情况,即当较长的英文字符串出现时:
Subterranean Animism Phantasmagoria of Flower View Undefined Fantastic Object Phantasmagoria of Flower View
一得阁拉米娜 thequickbrownfoxjumpsoveralazydogthequickbrownfoxjumpsoveralazydogthequickbrownfoxjumpsoveralazydog
就会有如下情况:
很久很久以前,当我还对排版一无所知时,我第一次在秀米里面遇见了如此严重的情况,当时我找到的解决办法是给文本框设置“西文打断”。然而当我在编辑 md 文档中一而再再而三遇到这个问题时,我的感受就是上面那被拉成了 super 面筋人的六个大字。
不过幸好,解决方法也和秀米一样简单:
1 | #write p { |
效果就是这样了:
但是,但是,任何一个选择都要付出代价。单词打断所要付出的代价就是增加了阅读成本,被打断的单词阅读起来非常不直观。所以我最后还是选择左对齐、不打断单词了,返璞归真了属于是。
图片对齐
其实和文字对齐差不多,参见 Typora 学习索引 - 快捷键和图片篇 | Recogeta’s Blog 或 Typora 学习索引 - 快捷键和图片篇 - 知乎
目录相关
首先,我把目录的 padding-bottom 给敲掉了:
1 | .md-toc { |
然后,我尝试设置了目录后分页和两栏目录:
1 | .md-toc-content { |
但是目录分栏只对编辑器有效而不对导出的 PDF 有效,同样分页也无效。下图是预期效果。
所以,这个.md-toc-content 到底该怎么修改?进入开发者模式(Shift+F12)可以看到:
难道……用列表生成的目录没法改样式?
2023.1.19 更新:但是我先解决了其中一个需求——目录后断页,我的方法是,设置二级标题前断页。我本来想待会添加这个功能的,只能说幸好目录里的这一项没起作用,要不然目录后面得白白空一页出来。
1 | h2 { |
但是分栏始终无法成功。分栏的代码移动到.md-toc 块中也不行,这样编辑器中目录的第一项还会空一行。
2023.1.22 更新:成功了!
上述分栏代码中 column-width
一项,不能过宽,一旦过宽无论是浏览器还是 PDF 都无法正常显示双栏。铸币的是,我修改的 CSS 样式里面 screen 和 print 的左右边距并不同,margin、paddings 已经被我改得乱七八糟,算了半天没算出来 column-width 该设多少,inherit 好像也用不了吧,只好一点一点试出来了。另外,我还直接设置目录居中,省得搞什么左边距的麻烦事了。以下是代码:
1 | /* 目录 */ |
最终更新:这个目录的跨页效果其实和图片跨页的效果一样糟糕……
尾注
尾注字体搞成和正文一样的了;尾注的分割线我也去掉了。
很明显那个返回按钮的 emoji 摆在那又违和又丑,不过那实际上是个字符,给他换种字体就行了!
1 | .footnotes-area .footnote-line { /*尾注字体*/ |
标题前自动分页
Page Breaks 这里面讲的挺清晰的了其实,我再多提一嘴吧。
标题的分页在 Typora 和 Word 中都算是比较简单的了,Word 里面需要找一找,而 Typora 直接改一行代码就行了。
1 | h2 { |
在 Page Breaks 里面,你可以看到一些考虑的更详尽的内容:
1 | @media print, (overflow-block: paged) or (overflow-block: optional-paged) |
双栏排版不在当前考虑范围之内,这里需要注意的是 与下段同页 这个功能,这是我之前没考虑到的。
上面讲到的方法只能实现标题前的自动分页,而要手动分页的话,则需要使用 HTML 来完成了,参见 HTML 篇。
其余杂七杂八的内容可以去这份文档的 GitHub 仓库中下载 CSS 代码了解(我写的贼烂,纯整活的)。
彩蛋
- 彩蛋图片:
- 作者:咲崎さきp (X: @sakipee36)
- 来源:sakipee36/status/1616081462654308363