[个性化] Vnote 添加预览背景图片以及修改字体等

1.0 前言

其实我以前一直是一个Typora的忠实粉丝，但是我被背刺了一波后（写了近1.5w多字后的学习笔记，ctrl + s 保存 直接软件闪退，重新启动Typora 前面所有的笔记全部无了，其虽然前 几次 崩溃，Typora的恢复功能，拉了我一把给恢复了，但是这一次就那么好运气了，哎~~~），然后就换了开源的 Vnote 这个 makedown 编辑器。作为一个热爱个性化的人，当让是必须要捣鼓一下了 嘿嘿。

2.0 下载安装

• 下载地址：https://github.com/vnotex/vnote/releases
• 我用的版本是：vnote-win-x64-qt5.15.2_v3.16.0.zip
• 下载完后解压即可，因为是免安装版本。

3.0 默认界面

4.0 个性化设置

4.1 设置主题和字体

• 点击软件右上角的三个小点。
  
• 进入设置页面，首先设置字体（这里我用的是 JetBrains Mono 字体安装方法我就不说了，百度很多教程…）
  
• 设置了字体可以点确认重启，也可以在继续切换主题，这里我喜欢用 月夜 主题。
  
• 重启后结果页面暂时变成了这样，我们继续接着修改。
  

4.2 修改背景图片

• 进入主题设置页面打开路径。
  
• 进入 月夜 主题的目录里，打开 web.css 文件开始进行修改。
  
• 从 第3行 的位置也就是 font-family 这里开始替换为如下（根据css规则你想要用的字体放在第一个会优先加载）：

font-family: "JetBrains Mono", "YaHei Consolas Hybrid", "Noto Sans", "Helvetica Neue", "Segoe UI", Helvetica, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体", "Apple Color Emoji", "Segoe UI Emoji";

• 从 第7行 的位置 background-color 这里替换为：

    background-image: url(code-1.png); /*这里就是我们的背景文件*/
    background-size:cover;
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    background-attachment: fixed;

• 修改后的截图如下
  
• 接下来通过搜索功能找到 code 样式，修改字体为 JetBrains Mono 如下：（注意：保存一下）
  
• 下一步把我们对应的背景图片 code-1.png 拷贝到 主题文件目录 里（目录就是我们打开web.css的目录里）。
  

5.0 修改代码块背景半透明

• 同样在 主题目录 里找到 highlight.css 文件并进行修改。
  
• 通过搜索 :not(pre) > code[class=“language-”]* 找到第1个（大概第39行）修改为如下（注意保存）：

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    /*background: #2d323b;*/ 
    background: rgba(45, 50, 59, 0.5);
}

• 截图如下
  

6.0 效果展示

6.1 重启Vnote查看效果

5.2 最后打开一个md看看效果

6.0 结语

效果的话也就上面这样，关于背景图片可以去 wallhaven 里下载有很多这样的图片。如果嫌麻烦可以直接下载 https://pan.baidu.com/s/1WVNlApKwvAE2452T8sR9BA 提取码: 0000 进行替换。