vscode的markdown preview enhanced插件的主题并不一定符合每个人的审美,所以有的时候需要自定义,下面给出两种在windows下MPE自定义CSS的方法。
注:MPE更新过后,界面出现了变更,不清楚此时的方法是否还有效。
方法一:更换自定义CSS
本来想要尝试增设Preview Theme中的默认值,从而直接将自定义的相同名字css移动到指定位置,后来发现默认值列表不可更改(个人水平不足),退一步选择下面的方法。
注:由于某些原因,MPE插件会更新主题文件,所以建议自己将自己的主题css进行备份,失效后替换
首先了解一下MPE的主题位置
首先进入C:\Users\${你的用户名}\.vscode\extensions\shd101wyy.markdown-preview-enhanced-${版本号}\node_modules\@shd101wyy\mume\styles
,在这个目录下有两个文件夹preview_theme和prism_theme。
其中preview_theme为Markdown排版样式,prism_theme为代码块排版样式。
主题下载
这方面本人确实没有什么好方法,typora有很多的免费主题,但是经过测试和MPE的css并不兼容。这边建议还是通过原有的css进行修改,此处需要的css语法可以自行学习。
由于原有的css在windows上打开全是一行css,更改并不方便,建议自行更改为适合阅读的格式,这边提供一段格式转换的代码。
input_css = '' # 这里用自己要format的css文件路径
output_css = 'format.css'
out_contents = ''
with open(input_css, 'r') as f:
in_contents = f.read()
depth = 0
for ch in in_contents:
if len(out_contents) > 0 and out_contents[-1] == '\n':
out_contents += depth * '\t'
if ch == '{':
out_contents += ch + '\n'
depth += 1
elif ch == ';':
out_contents += ch + '\n'
elif ch == '}':
depth -= 1
out_contents += '\n' + depth * '\t' + ch + '\n'
else:
out_contents += ch
with open(output_css, 'w') as f:
f.write(out_contents)
补充:如果用的是vscode,自带Format功能,只需要右键,选择Format Document即可。
主题自定义
这边采用Maserhe的自定义css进行讲解。 (主要是类mac的代码块很好看)
将mystyle.css丢进上面说的preview_theme文件夹,codeblock.css丢进prism_theme文件夹。如果想要和原本的预设css进行区分,可以在里面再创建一个文件夹,再丢进去,这样方便管理。
接下来使用命令ctrl+shift+p
,选择Preferences: Open User Settings(JSON) 打开 settings.json,当然不一定有User,只是我个人这边是User的。
在JSON中找到以下两条(如果没有就自己增加)
后面填写的是相对路径,分别是相对于preview_theme和prism_theme文件夹的相对路径。在这里填写绝对路径是没有用的,个人测试过,估计作者会拼接成绝对路径进行查找。这样就能够更改主题了。
方法二:直接更改style.less
这方面需要参考作者的文档。
打开style.less
使用ctrl+shift+p
,选择MPE: Customize CSS,打开style.less
修改style.less
按照css进行编写就行,比如这边我想整体更改图片大小,同时使得图片居中。
.markdown-preview.markdown-preview {
img {
max-width: 50%;
// 图片居中
display: block;
margin: 0 auto;
}
}
效果如下