Quantcast
Channel: 少数派
Viewing all articles
Browse latest Browse all 13778

简单又好看,你的 Markdown 文稿也能加上个性化主题

$
0
0

Markdown 简单实用,可以很快获得一份排版简约的文章,不过导出文稿时千篇一律的主题也让人感到单调。

这时,我们就可以通过 CSS(Cascading Style Sheets,层叠样式表)来自定义文章的样式,获得个性化的主题。许多 Markdown 编辑器都自带了 CSS 模板,还能下载第三方主题来扩充,即使你完全不懂 CSS 语法,也能一秒排出好看的文章。

套用 CSS 前后对比

这篇文章就带你了解常见 Markdown 编辑器如何使用 CSS,并提供一些好看、现成的主题供下载。

去哪里下载 CSS 主题

有的 Markdown 编辑器自带 CSS 主题,但一般只有寥寥数款,我们去哪里下载更多的 CSS 模板呢?在这一节里介绍的网站中,你可以下载到许多美观的模板。

Typora 的主题

Typora自带了几款简约的 CSS 主题,并且提供了一个官方主题下载界面,你可以在里面找到自己喜欢的主题。令人眼前一亮的是,在众多英文专用 CSS 中,我们还看到了一款为汉字设计的主题——Han,青绿色的链接高亮配色颇为素雅。

Han 主题效果

需要留意的是,Typora 的主题中有的可能有字体附件,在 Typora 之外的 Markdown 编辑器中可能会遇到不能显示的问题,这些特殊 CSS 主题在使用时需要特别注意。

> Typora 主题下载

Markdownhere

Markdownhere 是李笑来制作的一套 CSS 主题,已开源在 GitHub 上,对于中文的显示效果比较友好,字距、行距比直接套用英文模板更加自然,是为数不多的优质中文 CSS 主题。

Markdownhere 主题效果

> Markdownhere 主题下载

少数派经典主题

说起好看的中文 CSS 模板,少数派的经典模板是不能错过的。也许老读者还记得我派早期的主题,间或一抹少数派红的标题、链接,点缀得恰到好处。

少数派主题效果

少数派 CSS 没有附件,可以在支持 CSS 的编辑器中直接使用。

> 少数派经典 CSS 下载

MWeb 主题

MWeb 主题

如果你想要一套比较酷、比较有 Geek 气质的主题,MWeb 自带的模板是一个不错的选择。你可以直接下载下面的文件,它包含了 5 种主题。

MWeb 主题 下载

Ulysses 专用主题

Ulysses的主题并不是标准 CSS 格式,所以其他编辑器不能直接使用它们,但如果你正在使用 Ulysses,不要错过官方 Gallery 中的丰富主题。

Ulysses 丰富的主题

许多 Ulysses 是用户自己制作、上传的,其中不乏一些模仿经典网页或应用的主题,比如 GitHub、Byword、Terminal 等等,配色看起来非常酷。不过多数的 Ulysses 对中文适配不佳,英文下惊艳的模板放到汉字环境中就要打折扣。

CSS 模板怎么用

下载完 CSS 模板,如何使用它们?

每个人都有自己钟爱的编辑器,幸运的是,其中有不少是支持 CSS,而 Ulysses 这样的写作工具还有丰富的专用主题。下面我会以几个常见 Markdown 编辑器为例,谈谈如何使用 CSS。

Typora 直接预览 CSS

Typora 结合了 Markdown 语法的简洁和富文本编辑器「所见即所得」的特点,你可以在写作的界面直接看到最终的排版效果——包括 CSS 主题的效果。

Typora 可以直接预览 CSS

如果你需要导出带有 CSS 样式的文稿(比如 PDF),在 Typora 中直接按下快捷键 ⌘Command - P打印即可。如果想添加自定义模板,可以通过以下几步来实现(以 macOS 下的操作为例):

  1. 打开「偏好设置 - 通用 - 打开主题文件夹」;
  2. 把 CSS 主题文件放进去,重启 Typora;
  3. 在「菜单栏 - 主题」即可选择新主题。
Typora 添加主题

另外,Typora 同时支持 Windows、Linux 和 macOS,在任一平台上套用 CSS 都一样简单。

用 nvALT 套用主题

如果你的编辑器不幸不支持 CSS,也可以下载一个免费的 nvALT来给文章加主题,它的使用方法比较简单:

  1. 把你想要的 CSS 主题文件放到 /Users/apple/Library/Application Support/nvALT目录下;
  2. 把 CSS 文件重命名为 custom.css,重启 nvALT;
  3. 用快捷键 ⌃Control - ⌘Command - P打开 nvALT 的预览界面,即可看到效果;
  4. 如果需要导出文件,点击右下角第三个打印机图标,即可打印。
nvALT 使用 CSS

延伸阅读:

> 打开即写的笔记工具,Mac 上的草稿处理中心:nvALT

小结

CSS 其实不难用,各种编辑器对于 CSS 支持加上现成的模板,让不懂 CSS 语法的人也可以使用它们,把自己的文章样式变得更有个性。

这篇文章中的用法虽然基础,但是可以很快获得预期的主题效果,希望你激起你对 CSS 的兴趣。


> 下载 少数派 iOS 客户端、关注 少数派公众号,读有趣的内容 🎉



Viewing all articles
Browse latest Browse all 13778

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>