整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着 Windows、macOS、Android、iOS 纷纷在系统级加入暗色模式后，以暗色为主的 UI 在我们的生活中已经是越来越普遍。
在这之前，以暗色为主的 UI 往往只在开发工具中比较常见。很多年前的代码编辑器 /IDE 就已经允许用户在 UI 上应用以暗色为主的配色，且其中的大多数会默认使用暗色主题。
在开发工具中，暗色 UI 一方面能够减少屏幕的刺眼感，对需要长时间面对屏幕工作的程序员们来说更为友好，另一方面暗色 UI 能够给编写代码的程序员们带来更好的沉浸感，提升程序员在代码上的专注，因为在较暗的背景下，以亮色显示的代码在屏幕上会显得十分突出，这个时候程序员就能更容易地忽略掉两边用暗色显示的其他内容，将专注力集中在中间的代码上。
VSCode 就是一个典型的默认使用暗色主题的代码编辑器，官方提供了一个默认的「Dark+」配色，还提供了一个和 Visual Studio 类似的「Dark」配色。
然而，如果你对暗色主题有较为极致的追求的话，那么 VSCode 的默认颜色主题可能会让你感觉到一些不适。因为在这个主题中，微软除了黑、灰外还加入了一抹蓝色，这一抹蓝色在暗色主题下容易让人感觉有些扎眼，尤其是位于编辑器底部的蓝色底栏。
好在 VSCode 是一个基于 Electron 打造的开源编辑器，基于 Electron 程序的灵活性，微软向用户开放了非常多非常灵活的自定义选项。
在 VSCode 上，用户可以很方便地为 VSCode 做一个全新的、自定义的颜色主题，当然，他们也可以通过扩展市场下载其他用户制作的颜色主题来替换 VSCode 默认的主题。
为了将 VSCode 的界面统一成比较舒适的暗色色调，读者群的一位大佬开发了 Luke Dark Theme 这一颜色主题，这一主题上架 VSCode 扩展市场已经有一段时间了，在这段时间内这一主题收获了大量的好评，甚至登上了市场「Trend this week」（本周趋势）。
Luke Dark Theme 在 VSCode 官方默认暗色配色的基础上将灰色的色调稍稍调浅了一些，同时统一了 VSCode 底栏的颜色。虽然整个主题的颜色稍有一些「冷淡」的感觉，但是在总体的视觉观感上它比官方默认的主题是要舒服不少的。
默认主题中大块的蓝色在这一主题中被去除，同时左侧文件被选中后的底色也统一成了灰色，修改后的界面中只有非常小的一部分用的是其他颜色。
这使得整个界面看上去非常和谐，不像 VSCode 的官方默认主题一样因为颜色与颜色之间差异太大而让人感觉较亮的颜色比较刺。
在这一主题中作者也缩小了灰色与灰色之间的深浅差异，进一步减小了整个界面的对比度，所以在应用这一主题后你能够明显察觉到界面变得更加柔和了。
上图为 Luke Dark Theme，下图为官方默认
这里笔者截取了 Luke Dark Theme 和官方默认的 Dark 主题的左上角界面，读者朋友们可以通过上面这两张图详细对比两个主题在显示效果上的差异。
就笔者的实际使用体验而言，由于 Luke Dark Theme 界面更为柔和，在长时间的编码下它更不容易给人带来疲劳感。
除了界面的配色外，Luke Dark Theme 还对代码高亮的颜色进行了一些调整，在 Luke Dark Theme 内在 HTML、CSS 等语言的高亮中出现的蓝色被黄色、紫色取代掉了，原先用于高亮字符串的深橙色以及变量名的白色在 Luke Dark Theme 则是被更改为了深浅不一的绿色。
高亮这方面的改动可能会给一些已经习惯了官方高亮配色的朋友带来一些使用上的障碍，尤其是在 HTML 上，大面积的浅色黄色可能会对编写代码产生一定程度的干扰。
总体上这一套高亮的配色和整个主题本身是比较搭配的，但是这个高亮应该是针对作者常用的一些语言打造的，这使得在 HTML、PHP 这样的语言下主题自带的这一套高亮看起来会稍有一些扰眼。
如果你不怎么喜欢 Luke Dark Theme 中的这一套配色方案，你可以在 VSCode 的安装目录下找到如下路径的文件：
/resources/app/extensions/theme-defaults/themes
打开其中的 dark_vs.json，复制其中的 tokenColors 部分。
之后前往C:/Users/[你的用户名]/.vscode/extensions
用 Windows 资源管理器自带的搜索查找关键字「dark」，在搜索结果中找到 Luke Dark-color-theme.json，用任意的编辑器打开它。
之后将我们复制出来的 tokenColors 部分覆盖掉该文件中的 tokenColors 部分，保存后重启 VSCode，我们就能够将 VSCode 的高亮还原成默认状态，同时 Luke Dark Theme 界面的更改仍然能够保留下来。
修改后的效果如下图所示：
在笔者个人看来官方默认的高亮在多数场景下还是要更舒适一些，因为在 HTML 等语言下大面积的黄色看上去并不怎么友好。
考虑到这个体验是因人而异的，所以你可以根据自己的喜好来调整主题文件中的相关设置。在主题中还有很多其他的有关配色的选项，你可以在 Luke Dark Theme 的基础上做一些更加细致的修改，迭代出一个最适合你自己的版本。
在笔者个人看来作者可以考虑参考一下官方默认主题的主题文件，用 include 的方式剥离一个使用默认高亮配色的版本，使这个主题能够满足更多 VSCode 用户的需求。
笔者花了一些闲暇时间在 Luke Dark Theme 的基础上对其做了一些修改，做了一个色调更暗的、采用官方默认高亮（包括终端）的版本，如果你有需要的话可以在读者群中向笔者索要相关的主题文件。
改后的效果如下图所示：
最近准备搭建一个简单的文档平台，用于组内的文档管理。作为一个程序员，大多数情况下咱们写文档使用的都是markdown语法，比如wiki、hexo、github，然后在浏览器上展示。
目前大部分的编辑器都有自己的markdown插件并支持实时预览，如下图，
图1
此图是vscode编辑器，左侧是markdown文件，右侧是实时预览的界面，咱们这次的目标就是将markdown在浏览器上展示成这个样式。
为了将markdown在浏览器上展示就必须先将markdown转化为html，有了明确的需求就可以去网上搜寻一下工具，我们很容易就能找到一个使用非常频繁的工具——marked。
图2
如图2，它支持在页面中编译markdown代码，但是我们更希望先在后台完成编译的工作再将编译的产物放到页面中使用，这样页面的性能会提示一丢丢，因此我们使用它的node方式。
图3
如图3，node编译markdown的步骤也十分简单，仅需以下几步，
图4
如图4，左侧是markdown编译后的html，右侧是在浏览器中展示的情况，此时完全没有任何样式，所以我们还需要为它配置主题。我们选用最流行的样式——github-markdown-css，把它引入到文件中，再看看效果。
图5
现在页面已经有样式了，和github的readme展示的样式一样，但是你会发现两个问题，
注意：编译产物最外层需要包一层容器，容器的class名字为markdown-body，否则样式不生效。
为了解决上面第一个问题，我们将marked模块换成markdown-it模块，用法如下，
图6
此时markdown的大部分语法都已经支持了，但仍有个别语法不支持，不过不要紧，我们可以将markdown-it的html参数设置为true，这样用户可以直接用html语法写markdown。
代码块没有高亮是不可接受的，这会让同志们的浏览欲望大大降低。对比了一下highlight.js，我选择了prism.js。不为别的，就是因为它满足了我的要求。有人说prismjs比highlight.js对样式控制的更精细，不过I don't care it。
图7
如图7，我一眼就看中了这个主题，有趣。那还等什么，直接把js和css都down下来，引入页面。现在咱们再去看看效果，如下图，
图8
和我的编辑器主题一样。
到这里我们已经完成了我们的需求。
将markdown转化为html其实就两步，一是选择编译工具，需要尽可能多的支持markdown语法，二是选主题，需要看着养眼。
喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
VSCode中，有许多与HTML相关的插件可以大大提高开发效率和便利性。以下是一些值得推荐的插件，它们各自具有独特的功能和优点，可以帮助您更好地编写、调试和预览HTML代码。
1. HTML Snippets: 这个插件提供了许多HTML代码片段，可以帮助您快速编写常见的HTML结构和元素。只需输入简短的缩写，即可自动生成相应的HTML代码，大大提高了编写速度。
2. Emmet: Emmet是一个强大的代码生成器，支持多种编程语言，包括HTML。通过简单的缩写和语法，您可以快速生成复杂的HTML结构和嵌套元素。Emmet还提供了许多自定义选项，可以根据您的需求进行灵活配置。
3. HTML Boilerplate: 这个插件提供了一个HTML模板，包含了常见的HTML结构和元素，如文档类型声明、字符编码、头部信息等。使用这个插件，您可以快速创建一个基本的HTML框架，然后在此基础上进行进一步的开发。
4. HTML Preview: HTML Preview插件可以在VSCode中实时预览HTML代码的效果。您只需在编辑器中打开HTML文件，然后点击预览按钮，即可在侧边栏中查看HTML页面的渲染效果。这对于调试和预览HTML代码非常方便。
5. Color Highlight: Color Highlight插件可以自动识别HTML代码中的颜色值，并在编辑器中高亮显示。这使得您更容易发现和修改颜色值，提高了代码的可读性和可维护性。
6. HTML Boilerplate Generator: 这个插件可以帮助您快速生成HTML5的Boilerplate代码，包括常用的meta标签、字符编码、视口设置等。它还提供了一些自定义选项，可以根据您的需求生成符合规范的HTML代码。
7. HTML CSS Support: 这个插件提供了对HTML和CSS的完整支持，包括语法高亮、代码片段、代码折叠等功能。它还支持自动完成和错误检查，可以帮助您更高效地编写HTML和CSS代码。
8. HTML/CSS/JS Prettify: 这个插件可以对HTML、CSS和JavaScript代码进行格式化，使其更加整洁和易读。您可以自定义格式化规则，也可以使用默认的规则进行快速格式化。这对于保持代码风格一致和提高代码可读性非常有帮助。
9. HTML Validator: HTML Validator插件可以对HTML代码进行验证，检查其是否符合W3C规范。它可以检测出潜在的错误和不符合规范的地方，并给出相应的提示和建议。这对于编写符合标准的HTML代码非常有帮助。
10. Live Server: Live Server插件可以在本地启动一个实时服务器，让您在浏览器中实时预览HTML、CSS和JavaScript代码的效果。它支持自动刷新和热更新，可以实时反映代码的变化。这对于前端开发和调试非常方便。
以上是一些值得推荐的VSCode中与HTML相关的插件。它们各自具有独特的功能和优点，可以帮助您提高开发效率和便利性。当然，具体选择哪些插件还需要根据您的实际需求和喜好来决定。希望这些推荐能对您有所帮助！
?
*请认真填写需求信息，我们会在24小时内与您取得联系。
