首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何让Visual Studio代码以带格式的代码显示斜体字体?

如何让Visual Studio代码以带格式的代码显示斜体字体?
EN

Stack Overflow用户
提问于 2016-12-25 19:45:43
回答 12查看 73.7K关注 0票数 71

如何配置VS Code以支持斜体样式,如图所示?

我的当前设置:

代码语言:javascript
运行
复制
{
  "editor.fontLigatures": true,
  "editor.fontFamily": "Operator Mono"
}
EN

回答 12

Stack Overflow用户

发布于 2018-06-06 15:08:26

这个问题的直接答案是():

将此代码添加到settings.json (ctrl + ,cmd + ,)

代码语言:javascript
运行
复制
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        //following will be in italic (=FlottFlott)
        "comment",
        "entity.name.type.class", //class names
        "keyword", //import, export, return…
        "constant", //String, Number, Boolean…, this, super
        "storage.modifier", //static keyword
        "storage.type.class.js", //class keyword
      ],
      "settings": {
        "fontStyle": "italic"
      }
    },
    {
      "scope": [
        //following will be excluded from italics (VSCode has some defaults for italics)
        "invalid",
        "keyword.operator",
        "constant.numeric.css",
        "keyword.other.unit.px.css",
        "constant.numeric.decimal.js",
        "constant.numeric.json"
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

当然,您也可以在scope中提供其他关键字。检查VS Code's documentationscope keywords

解释:

当你为VS Code定义一个字体时(例如操作符OP的Mono ),所有的东西都会以该字体呈现。为了实现OP图像中的外观,您需要对某些元素应用不同的字体样式(斜体/粗体)。此外,如果你的字体有明显不同的斜体风格(例如操作符Mono有草书连字),你会得到类似于OP图像的外观。

其他注意事项

为了使您的斜体看起来与普通文本不同,您需要使用斜体看起来不同的字体。这样的字体是OperatorMono (付费)、FiraCodeiScript (免费)或FiraFlott (免费)。我个人更喜欢FiraCodeiScript。

要将斜体字符链接在一起(它们之间没有空格),就像草书一样,您需要启用字体连字:

要执行上述操作,请确保您的settings.json具有以下内容:

代码语言:javascript
运行
复制
{
  "editor.fontLigatures": true,
  "editor.fontFamily": "'Fira Code iScript', Consolas, 'Courier New', monospace"
}

其余的字体是不需要的,但它们是备用字体,以防您遗漏了第一种字体。名称中包含空格的字体通常需要单个quotes'.此外,您可能需要重新启动VS代码。

票数 102
EN

Stack Overflow用户

发布于 2018-05-01 18:55:55

首先,我知道这个帖子已经有一年多的历史了,但我一直在寻找相同的东西而不改变主要的Dark+主题,所以我把这些放在了vs代码的settings.json中,它可能不是最漂亮的,但它甚至可以在任何你选择的主题上没有斜体,如果你想删除它只是把它放在评论中,我已经把颜色放在评论中,如果你以后想改变它的话!

代码语言:javascript
运行
复制
     "editor.tokenColorCustomizations": {
    "textMateRules": [{
            "name": "Comment",
            "scope": [
                "comment",
                "punctuation.definition.comment"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#4A4A4A"
            }
        },

        {
            "name": "Keyword, Storage",
            "scope": [
                "Keyword",
                "Storage"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },

        {
            "name": "Keyword Control",
            "scope": [
                "keyword.control"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },

        {
            "scope": "entity.other.attribute-name",
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#78dce8"
            }
        },


        {
            "name": "entity.name.method.js",
            "scope": [
                "entity.name.method.js"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#82AAFF"
            }
        },


        {
            "name": "Language methods",
            "scope": [
                "variable.language"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#FF5370"
            }
        },


        {
            "name": "HTML Attributes",
            "scope": [
                "text.html.basic entity.other.attribute-name.html",
                "text.html.basic entity.other.attribute-name"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#FFCB6B"
            }
        },


        {
            "name": "Decorators",
            "scope": [
                "tag.decorator.js entity.name.tag.js",
                "tag.decorator.js punctuation.definition.tag.js"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#82AAFF"
            }
        },


        {
            "name": "ES7 Bind Operator",
            "scope": [
                "source.js constant.other.object.key.js string.unquoted.label.js"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#FF5370"
            }
        },

        {
            "name": "Markup - Italic",
            "scope": [
                "markup.italic"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#f07178"
            }
        },


        {
            "name": "Markup - Bold-Italic",
            "scope": [
                "markup.bold markup.italic",
                "markup.italic markup.bold",
                "markup.quote markup.bold",
                "markup.bold markup.italic string",
                "markup.italic markup.bold string",
                "markup.quote markup.bold string"
            ],
            "settings": {
                "fontStyle": "bold",
                //"foreground": "#f07178"
            }
        },

        {
            "name": "Markup - Quote",
            "scope": [
                "markup.quote"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": ""
            }
        },
        {
            "scope": "variable.other",
            "settings": {
                "foreground": "#82fbff"
            }
        },
        {
            "scope": "entity.name.function",
            "settings": {
                "foreground": "#dfd9a8"
            }
        },
        {
            "scope": "support.function",
            "settings": {
                "fontStyle": "italic",
                "foreground": "#dfd9a8"
            }
        },
        {
            "scope": "string",
            "settings": {
                "foreground": "#CE9178"
            }
        },
    ]
},

希望这对任何人都有帮助,并再次为在过时的帖子上发帖而道歉。

票数 28
EN

Stack Overflow用户

发布于 2019-12-15 00:04:20

恢复莫妮卡的回答对我很有帮助,但我注意到所有东西都不是像我在斜体特定主题上发现的那样是斜体的。我在https://github.com/wesbos/cobalt2-vscode/issues/116上找到了一个更全面的斜体设置列表。在github上感谢@bgarrant。

将此代码添加到settings.json (ctrl +或cmd +,)

代码语言:javascript
运行
复制
"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
              //following will be in italic
              "comment",
              "emphasis",
              "entity.name.method.js",
              "entity.name.class.js",
              "entity.name.tag.doctype",
              "entity.other.attribute-name",
              "entity.other.attribute-name.tag.jade",
              "entity.other.attribute-name.tag.pug",
              "keyword",
              "keyword.control",
              "keyword.operator.comparison",
              "keyword.control.flow.js",
              "keyword.control.flow.ts",
              "keyword.control.flow.tsx",
              "keyword.control.ruby",
              "keyword.control.module.ruby",
              "keyword.control.class.ruby",
              "keyword.control.def.ruby",
              "keyword.control.loop.js",
              "keyword.control.loop.ts",
              "keyword.control.import.js",
              "keyword.control.import.ts",
              "keyword.control.import.tsx",
              "keyword.control.from.js",
              "keyword.control.from.ts",
              "keyword.control.from.tsx",
              "keyword.operator.expression.delete",
              "keyword.operator.new",
              "keyword.operator.expression",
              "keyword.operator.cast",
              "keyword.operator.relational",
              "keyword.operator.sizeof",
              "keyword.operator.logical.python",
              "italic",
              "markup.italic",
              "markup.quote",
              "markup.changed",
              "markup.italic.markdown",
              "markup.quote.markdown",
              "markup.deleted.diff",
              "markup.inserted.diff",
              "meta.delimiter.period",
              "meta.diff.header.git",
              "meta.diff.header.from-file",
              "meta.diff.header.to-file",
              "meta.tag.sgml.doctype",
              "meta.var.expr",
              "meta.class meta.method.declaration meta.var.expr storage.type.js",
              "meta.decorator punctuation.decorator",
              "meta.selector",
              "punctuation.accessor",
              "punctuation.definition.comment",
              "punctuation.definition.template-expression.begin",
              "punctuation.definition.template-expression.end",
              "punctuation.section.embedded",
              "quote",
              "source.js constant.other.object.key.js string.unquoted.label.js",
              "source.go keyword.package.go",
              "source.go keyword.import.go",
              "source.go keyword.function.go",
              "source.go keyword.type.go",
              "source.go keyword.struct.go",
              "source.go keyword.interface.go",
              "source.go keyword.const.go",
              "source.go keyword.var.go",
              "source.go keyword.map.go",
              "source.go keyword.channel.go",
              "source.go keyword.control.go",
              "storage",
              "storage.type",
              "storage.modifier",
              "storage.type.property.js",
              "storage.type.property.ts",
              "storage.type.property.tsx",
              "tag.decorator.js entity.name.tag.js",
              "tag.decorator.js",
              "text.html.basic entity.other.attribute-name.html",
              "text.html.basic entity.other.attribute-name",
              "variable.language",
              "variable.other.object.property"
            ],
            "settings": {
              "fontStyle": "italic"
            }
        }
    ]
}

新的精炼列表我使用9/11/2021复制下面的块

代码语言:javascript
运行
复制
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"cSpell.languageSettings": [

],
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        //following will be in italic (=FlottFlott)
        "comment",
        "entity.name.type.class", //class names
        
        "keyword", //import, export, return…
        "constant", //String, Number, Boolean…, this, super
        "storage.modifier", //static keyword
        "storage.type.class.js", //class keyword
        "entity.name.method.js",
        "entity.name.class.js",
        "entity.name.tag.doctype",
        "entity.other.attribute-name",
        "entity.other.attribute-name.tag.jade",
        "entity.other.attribute-name.tag.pug",
      ],
      "settings": {
        "fontStyle": "italic"
      }
    },
    {
      "scope": [
        //following will be excluded from italics (VSCode has some defaults for italics)
        "invalid",
        "keyword.operator",
        "constant.numeric.css",
        "keyword.other.unit.px.css",
        "constant.numeric.decimal.js",
        "constant.numeric.json"
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]

}

票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41320848

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档