[vscode] windows下MPE自定义CSS

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的。

ctrl+shift+p

在JSON中找到以下两条(如果没有就自己增加)

后面填写的是相对路径,分别是相对于preview_theme和prism_theme文件夹的相对路径。在这里填写绝对路径是没有用的,个人测试过,估计作者会拼接成绝对路径进行查找。这样就能够更改主题了。

方法二:直接更改style.less

这方面需要参考作者的文档

打开style.less

使用ctrl+shift+p,选择MPE: Customize CSS,打开style.less

ctrl+shift+p

修改style.less

按照css进行编写就行,比如这边我想整体更改图片大小,同时使得图片居中。

.markdown-preview.markdown-preview {

  img {
    max-width: 50%;

    // 图片居中
    display: block;
    margin: 0 auto;
  }
}

效果如下


整体更改图片大小并图片居中

参考文献

Typora主题
vscode Markdown 预览样式美化
MPE文档——自定义CSS

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容