Typore修改本地字体颜色(修改主题的css文件)

Typore修改字体颜色

想在typore上实现修改字体颜色,查了两次都没找到好的解决办法,后来发现可以通过修改主题的css文件来实现。

效果如图:

Typore修改本地字体颜色(修改主题的css文件)

(注意:下面的方法可以实现本地字体高亮,如果要复制到其他平台,请使用<font color="red"></font>这种形式


实现原理:

通过修改所使用主题的css文件实现背景颜色和字体颜色的自定义

? 本次以vue主题为例


实现步骤:

  1. 打开扩展

文件 -> 偏好设置 -> MakeDown -> 拓展语法,选中高亮

Typore修改本地字体颜色(修改主题的css文件)

  1. 打开开发者模式

文件 -> 偏好设置 -> 高级设置 ->开启调试模式

Typore修改本地字体颜色(修改主题的css文件)

  1. 使用高亮(== ==)并检查元素(右键,检查元素)

Typore修改本地字体颜色(修改主题的css文件)

点击1处,然后再点一下我们高亮的字段就可以显示字体位置,可以看到,加上== ==之后,字体使用了mark标签,见图中2处。而默认使用的是3处的样式,如果你使用的主题没有覆盖默认样式那么高亮应该是黄色,我使用的是vue主题,所以用的是4处的css样式,下面我们可以通过修改vue主题的css文件来实现背景颜色或字体颜色的改变

  1. 找到使用的主题的css文件

文件 -> 偏好设置 -> 外观 -> 主题

Typore修改本地字体颜色(修改主题的css文件)

  1. 修改css文件

    比如我们要把背景颜色去掉,把字体颜色改成红色

    1. 打开vue.css(vs code,记事本或其他)
    2. 找到mark样式所在的位置(步骤3的4处)
    3. 如下所示,把背景颜色改为白色,并把字体颜色设置为红色,修改完保存退出

Typore修改本地字体颜色(修改主题的css文件)

  1. 重新打开typore,使用== == 会发现高亮已经变成无背景色,字体变为红色了

    Typore修改本地字体颜色(修改主题的css文件)

(注意:如果不是把颜色改为白色,而是删除背景色那一行,那么就会使用默认的背景颜色,即之前图中的3处的黄色。)

Typore修改本地字体颜色(修改主题的css文件)

上一篇:kubernetes-dashboard-10


下一篇:HTML 颜色