Vanblog 如何自定义markdown ccs渲染样式
2025-12-28
Vanblog
00

在后台目录新建:

bash
展开代码
vanblog# mkdir data/static/markdown-themes/

然后去找一款主题,比如这里:https://theme.typora.io/

举个例子,比如第一个,点击后进入:https://github.com/sumruler/typora-theme-phycat/releases

image.png

我直接下载到这里:

bash
展开代码
vanblog/data/static/markdown-themes# wget https://github.com/sumruler/typora-theme-phycat/releases/download/v2.0.3/typora-theme-phycat.zip

解压:

bash
展开代码
vanblog/data/static/markdown-themes# unzip typora-theme-phycat.zip Archive: typora-theme-phycat.zip creating: phycat/ inflating: phycat/HarmonyOS_Sans_SC_Regular.woff inflating: phycat/phycat.dark.css inflating: phycat/SourceHanSerifCN-Medium.ttf inflating: phycat/SourceHanSerifCN-Bold.ttf inflating: phycat/HarmonyOS_Sans_SC_Bold.woff inflating: phycat/phycat.light.css inflating: phycat/Cascadia-Code-Regular.ttf inflating: phycat-caramel.css inflating: phycat-cherry.css inflating: phycat-dark.css inflating: phycat-forest.css inflating: phycat-mauve.css inflating: phycat-mint.css inflating: phycat-prussian.css inflating: phycat-sakura.css inflating: phycat-sky.css inflating: README.md vanblog/vanblog/data/static/markdown-themes# ll total 29104 drwxr-xr-x 3 root root 4096 Dec 28 15:06 ./ drwxr-xr-x 12 root root 4096 Dec 28 15:03 ../ drwxr-xr-x 2 root root 4096 Dec 27 20:12 phycat/ -rw-r--r-- 1 root root 8077 Dec 27 20:12 phycat-caramel.css -rw-r--r-- 1 root root 8251 Dec 27 20:12 phycat-cherry.css -rw-r--r-- 1 root root 6594 Dec 27 20:12 phycat-dark.css -rw-r--r-- 1 root root 8139 Dec 27 20:12 phycat-forest.css -rw-r--r-- 1 root root 8335 Dec 27 20:12 phycat-mauve.css -rw-r--r-- 1 root root 8226 Dec 27 20:12 phycat-mint.css -rw-r--r-- 1 root root 8262 Dec 27 20:12 phycat-prussian.css -rw-r--r-- 1 root root 8226 Dec 27 20:12 phycat-sakura.css -rw-r--r-- 1 root root 8026 Dec 27 20:12 phycat-sky.css -rw-r--r-- 1 root root 6480 Dec 27 20:12 README.md -rw-r--r-- 1 root root 29687713 Dec 27 20:12 typora-theme-phycat.zip

后台 站点设置 → 布局 里:

亮色填:/static/markdown-themes/xxx-light.css

暗色填:/static/markdown-themes/xxx-dark.css

填写后提交:

image.png

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:Dong

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC。本作品采用《知识共享署名-非商业性使用 4.0 国际许可协议》进行许可。您可以在非商业用途下自由转载和修改,但必须注明出处并提供原作者链接。 许可协议。转载请注明出处!