首页 > 其他分享 >vscode高亮插件Highlight Matching Tag的样式设置

vscode高亮插件Highlight Matching Tag的样式设置

时间:2023-09-02 21:23:03浏览次数:54  
标签:插件 高亮 定义 vscode 边框 样式 Tag border

vscode高亮插件Highlight Matching Tag的样式设置

Highlight Matching Tag插件下载安装后,一般不会立即显示,需要在setting.json文件上加上一段代码,才有高亮显示。
高亮样式设计参考插件官网:https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
里面介绍了几个样式,以下是我个人使用的样式,感觉这一段设置够用了:

"highlight-matching-tag.styles": {
  "opening": {
    "left": {                       //左边尖括号
      "custom": {
        "borderWidth": "0 0 0 10px", //边框宽度,分别为上、右、下、左
        "borderStyle": "solid",    //边框样式
        "borderColor": "#99ccff", //边框颜色
        "borderRadius": "2px",  //边框圆角
        "overviewRulerColor": "blue"   //滚动条上的颜色
      }
    },
    "right": {                       //右边尖括号
      "custom": {
        "borderWidth": "0 10px 0 0",
        "borderStyle": "solid",
        "borderColor": "#99ccff",
        "borderRadius": "2px",
        "overviewRulerColor": "blue"
      }
    }
  }
}

其中borderStyle的值可以填:

  • none: 定义无边框。
  • hidden: 与 “none” 相同。 不过应用于表时除外,对于表,hidden 用于解决边框冲突。
  • dotted: 定义点状边框。 在大多数浏览器中呈现为实线。
  • dashed: 定义虚线。 在大多数浏览器中呈现为实线。
  • solid: 定义实线。
  • double: 定义双线。 双线的宽度等于 border-width 的值。
  • groove: 定义 3D 凹槽边框。 其效果取决于 border-color 的值。
  • ridge: 定义 3D 垄状边框。 其效果取决于 border-color 的值。
  • inset: 定义 3D inset 边框。 其效果取决于 border-color 的值。
  • outset: 定义 3D outset 边框。 其效果取决于 border-color 的值。
  • inherit: 规定应该从父元素继承边框样式。

borderColor的值可以填颜色名,也可以填颜色代码

效果图:

标签:插件,高亮,定义,vscode,边框,样式,Tag,border
From: https://www.cnblogs.com/yimming/p/17674207.html

相关文章

  • 硬件管理平台-硬件网关-插件模块-集成(下)
    硬件管理平台-硬件网关-插件模块-集成(下)简介通过以上的几篇文章说明了xml的相关配置信息和配置项,我们可以对插件模块的剩余部分进行说明了。当网关服务加载了本地的硬件插件后就产生了硬件类型的实例,通过该实例就可以去调用下位机了。而去调用哪个下位机,我们就需要通过xml的配置......
  • 在VSCode上部署CodeWhisperer
    本文介绍了在代码平台VSCode上部署CodeWhisperer插件,使用AI生成相应的代码,帮助我们在日常减少代码的搜索工作0.前期准备准备一个可以收邮件的邮箱地址,本文使用126邮箱1.CodeWhisperer简介AmazonCodeWhisperer是一款由机器学习驱动的通用代码生成器,可为您实时提供代码建议......
  • 通过代理连接本地vscode和远程服务器手记
    关键信息记录1.在WSL实测nc可实现代理流量转发ssh-ikey.pem<username>@<hostname>-o"ProxyCommand=nc-Xconnect-x<proxy-host>:<proxy-port>%h%p"2.windows无法使用nc,通过修改VS-CodeRemote-SSH插件的配置:"remote.SSH.path":"D:\......
  • C. Vika and Price Tags
    C.VikaandPriceTagsVikacametoherfavoritecosmeticsstore"GoldenPear".Shenoticedthatthepricesof$n$itemshavechangedsinceherlastvisit.Shedecidedtoanalyzehowmuchthepriceshavechangedandcalculatedthedifferencebet......
  • Flink 1.17教程:WebUI提交作业及打jar包maven插件配置
    打jar包maven插件配置<build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-shade-plugin</artifactId><version>3.2.4</version>......
  • PyCharm — Gitee 插件
    本文:在本地电脑安装Git,在线注册Gitee,给PyCharm配置Gitee的使用。Git客户端安装(Windows)⽹址:https://git-scm.com/downloads下载完.exe,双击安装。一路”next“,默认选项。不建议修改安装⽬录位置。查看是否安装成功。cmd打开终端。输⼊  git--version  看到版本......
  • git tag 到底是个啥?
    gittag命令用于在Git仓库中创建、修改和删除标签。它的使用方式如下:创建标签:gittag<tag-name>其中<tag-name>是要创建的标签名称。例如:gittagv1.0这将在当前分支上创建一个名为“v1.0”的标签。查看所有标签:gittag这将列出所有在当前仓库中创建的标签。修改标签:gittag-......
  • 金蝶云星空-插件调试 (本地开发,集成环境)
    金蝶云星空-插件调试(本地开发,集成环境)  调试在本地的情况下,可以先重新生成解决方案——> 调试附加到进程---->w3wp.exe(多个都选中,保险)--------->进行调试。如果还是有问题可以重启iis 重新来过。 本地环境,也就是集成环境,路径一般是默认在C盘下,非协同环境的工作空间。......
  • KubeSphere 社区双周报 | KubeKey 新增网络插件 Hybridnet | 2023.08.18-08.31
    KubeSphere社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过commit的贡献者,并对近期重要的PR进行解析,同时还包含了线上/线下活动和布道推广等一系列社区动态。本次双周报涵盖时间为:2023.08.18-2023.08.31。贡献者名单新晋KubeSphereCon......
  • idea插件easycode
    作为Java开发者,我们经常需要编写大量的重复性代码,例如实体类的属性、Getter和Setter方法、数据库操作代码等。这些繁琐的工作占用了我们宝贵的时间和精力,影响了开发效率。幸运的是,有一款强大的IDEA插件,名为EasyCode,可以帮助我们自动生成这些重复代码,极大地提升开发效率。在......