vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

一、设置Fira_Code字体

1.下载字体
这里给出github下载链接，点击链接后在README.md中的Download & Install一栏中即可下载，链接中也包括字体示例及介绍，可自行查看。
Fira_Code字体下载

2，安装字体
下载并解压，进入里面的ttf文件夹，双击或右击后点击安装，里面包含六种样式，可以选择性安装或全安装即可。

3，设置vscode
打开vscode，点击左下角齿轮形状图标，选择settings，得到下图所示界面：

根据上图箭头所示依次点击Font，Edit in settings.json，添加如下代码：

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
  • 注：如果添加到{}里的最后面，则需去掉true后面的逗号
  • 如果不想使用连字，则将true改为false (什么是连字可自行百度，这里举个例子，c语言中!=使用连字后则会显示≠)

二、设置字体颜色

可以通过更换主题来改变字体颜色，这里推荐几款比较经典的主题，供大家选择。

  • One Dark Pro Italic
  • Material Theme
  • One Dark Pro
  • Darker One

直接在vscode左侧Extensions中搜索安装即可使用，如果想要尝试其他主题，可输入 One 进行搜索，众多主题总有一款适合你。

三、设置编辑器背景颜色及光标所在行的颜色

之前习惯用黑色背景，可是改变主题后背景往往会发生改变，可以通过设置自定义背景颜色。
按照上面的步骤打开settings.json，添加以下设置：

"workbench.colorCustomizations": {        //覆盖当前所选颜色主题的颜色

  "editor.background": "#030202",        //编辑器背景色

  "editor.selectionBackground": "#6b5244",     //用户选中代码段的颜色 

  "editor.findMatchBackground": "#ff0000",     //当前搜索匹配的颜色

  "editor.findMatchHighlightBackground": "#ff00ff",   //其他搜索匹配项的颜色

  "editor.findRangeHighlightBackground": "#ff9900",   //限制搜索范围的颜色

  "editor.lineHighlightBackground": "#48314e",    //光标所在行高亮内容的背景颜色

  "editor.lineHighlightBorder": "#704b36"      //光标所在行四周边框的背景颜色
 },

下面放出效果图，读者可自定义自己喜欢的颜色。

总结

到此这篇关于vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解的文章就介绍到这了,更多相关vscode设置Fira_Code字体内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Win7环境下搭建Go开发环境(基于VSCode编辑器)

    Win7环境下搭建Go开发环境(基于VSCode编辑器)

    一.在搭建的时候参考以下文章 http://www.cnblogs.com/zsy/archive/2016/02/28/5223957.html http://blog.csdn.net/hil2000/article/details/51714607 http://www.cnblogs.com/mubing/p/5820038.html http://www.golangtc.com/t/57d3961db09ecc1635000170 二.准备(将所有需要的软件下载下来) 1.VSCod

  • 详解关于php的xdebug配置(编辑器vscode)

    虽然说echo和print_r是公认的最实用的调试工具,但是效率真的没有可视化的直接断点那么高.这里简单介绍如果安装及配置xdebug for vscode 一.PHP环境处的配置 1.编译安装 下载及编译php,因为我所在的公司php版本是5.4的,所以去xdebug官网上选了相对比较底的版本.您也可以根据你们的实际情况下载相应的xdebug版本:https://xdebug.org/download.php wget https://xdebug.org/files/xdebug-2.4.1

  • 详解VScode 配置为 LaTeX 编辑器(IDE)

    VScode 配置为 LaTeX IDE 在Windows中,配置VScode作为LaTeX的编辑器(IDE),并使用SumatraPDF预览PDF文件.主要是LaTeX Workshop扩展的设置,如果要使用外部的PDF阅读器,则还需要设置SumatraPDF. 安装扩展 ctrl+shift+x调出应用商店,搜索并安装LaTeX Workshop扩展: 配置LaTeX Workshop LaTeX文件.tex的编译.预览.辅助文件的清理等都在扩展latex workshop中设置. LaTe

  • Win10下为VSCode配置LaTex编辑器的方法

    任务描述 写小论文的利器是什么呢?LaTex!写代码的利器是什么呢?VSCode!好,那么如何在VSCode上配置LaTex环境呢,以及配置之后,如何选择编译的方式呢?大部分博客只说如何配置,却不说如何编译,导致在编译的过程中总是报错,本文就详细的讲一下这两点. 配置LaTex 首先,打开VSCode,根据图中的步骤,安装LaTex Workshop,我的已经安装过了,所以没显示Install 安装LaTex的步骤 其次,在VSCode界面,按快捷键:ctrl + Shift + p,召唤出搜索

  • vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

    一.设置Fira_Code字体 1.下载字体 这里给出github下载链接,点击链接后在README.md中的Download & Install一栏中即可下载,链接中也包括字体示例及介绍,可自行查看. Fira_Code字体下载 2,安装字体 下载并解压,进入里面的ttf文件夹,双击或右击后点击安装,里面包含六种样式,可以选择性安装或全安装即可. 3,设置vscode 打开vscode,点击左下角齿轮形状图标,选择settings,得到下图所示界面: 根据上图箭头所示依次点击Font,Edit

  • 使用 Opentype.js 生成字体子集的实例代码详解

    字体子集是将字体文件中部分多余的字符删除,来减小文件大小,从而在 Web 端使用或嵌入到其他应用或系统中,在网上可以找到不少这方面的工具. Opentype.js是一套可以支持浏览器环境和 Node.js 环境的开源 OpenType 字体读写库,利用这个库可以很轻松实现浏览器环境和 Node.js 环境的字体子集功能. 在浏览器环境创建字体子集工具 首先创建一个简单的 HTML界面,包括一个选取字体文件按钮,一个输入框用于输入保留的字符,和一个保存下载按钮. HTML <!DOCTYPE ht

  • python之pyqt5通过按钮改变Label的背景颜色方法

    使用setStyleSheet方法修改得到自己想要的字体,大小,颜色 self.lab = QLabel("标签字体大小颜色", self) self.lab.setGeometry(50,50,300,200) self.setStyleSheet("QLabel{color:rgb(225,22,173,255);font-size:50px;font-weight:normal;font-family:Arial;}") color:rgb()中的四个参数,前

  • asp.net 仿微信端菜单设置实例代码详解

    第一步:添加引用文件 <link rel="stylesheet" href="~/assets/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="~/assets/css/font-awesome.min.css" rel="external nofollow"

  • 对matplotlib改变colorbar位置和方向的方法详解

    如下所示: #! usr/bin/python #coding=utf-8 import numpy as np import matplotlib.pyplot as plt data=np.random.rand(10,10) fig, ax=plt.subplots() data[data==-1]=np.nan#去掉缺省值-1 im =ax.imshow(data,interpolation='none',cmap='Reds_r',vmin=0.6,vmax=.9)#不插值 #去掉边框

  • 使用Java设置字型和颜色的方法详解

    使用Java设置字型和颜色的方法详解

    Java绘图中,显示文字的方法主要有三种: (1)drawString(String str,int x,int y):在指定的位置显示字符串. (2)drawChars(char data[],int offset,int length, int x, int y):在指定的位置显示字符数组中的文字,从字符数组的offset位置开始,最多显示length个字符. (3)drawBytes(byte data[],int offset,int length,int x,int y), 在指定的位

  • 利用vscode调试编译后的js代码详解

    利用vscode调试编译后的js代码详解

    前言 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. vscode 是一个非常棒的编辑器,内置功能强大的调试能力.经过简单的设定,就可以对 js 文件进行调试.但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码.但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的. 下面话不多说了,来一起看看详细的介绍吧. vscode 的常规调试 vscode 的调试界面在窗口最左边: 最

  • C#字体池技术实现代码详解

    字体池的应用,主要是为了解决字体不断创建导致句柄泄漏/内存泄漏的问题,这个问题在Android上也同样存在. 经测试,C# WinForm原生控件不存在字体问题,但是使用的第三方控件Dev 14.1就存在这样的问题. 所以参照线程池思路,想到了使用字体池的方式,使系统中的字体统一为一个对象,经测试,有效解决了泄漏问题. 字体池代码: /// <summary> /// 字体缓存类 /// </summary> public static class FontStatic { ///

  • vscode 使用Prettier插件格式化配置使用代码详解

    参考 使用ESLint+Prettier来统一前端代码风格 vscode 配置vue+vetur+eslint+prettier自动格式化功能 问题描述 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然还有其他许多- 第一反应就是反感,后面冷静一想,还是自己做事的态度有问题,做完了功能已经完成了95%,为什么不到最后一步一键格式化,做到百分百呢?反思中 为了让以后代码美观,不让别人吐

  • Java设置PDF跨页表格重复显示表头行的步骤详解

    Java设置PDF跨页表格重复显示表头行的步骤详解

    目录 前言 1.导入Jar包 2.Java代码 总结 前言 在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页是显示表格的表头内容,这里只需要简单使用方法 grid.setRepeatHeader(true);即可. 具体参考如下方法步骤. 1.导入Jar包 这里导入的是Free Spire.PDF for Java的jar包,Spire.PDF for Java 支持的功能非常丰富,例如 PDF 文档安全性

随机推荐