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 进行替换。

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

visual studio如何给编辑区添加背景图片，修改字体大小主题
我们使用编辑器编写代码时总喜欢把编辑器搞得很个性化,今天给大家讲解一下visual studio如何变的跟个性化(我的visual studio 编辑器版本是1.18.1),至于怎么查看版本,帮助里面 ...
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
uni-app小程序图片使用有image标签和background-image背景图两种方式: 下有获取本地图片的网络地址方式:见第四步一.方式一:使用image标签引入: uni-app官方ima ...
图片上传，预览以及图片删除
背景前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
【若依(ruoyi)】表格图片预览功能图片超宽、超高问题
前言若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.5 ...
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
Android AR开发实践之七：OpenGLES相机预览背景绘制源码详解
Android AR开发实践之七:OpenGLES相机预览背景绘制源码详解目录 Android AR开发实践之七:OpenGLES相机预览背景绘制源码详解一.OpenGL ES渲染管线 1.基本处 ...
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...

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