整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
著 Windows、macOS、Android、iOS 紛紛在系統(tǒng)級加入暗色模式后，以暗色為主的 UI 在我們的生活中已經(jīng)是越來越普遍。
在這之前，以暗色為主的 UI 往往只在開發(fā)工具中比較常見。很多年前的代碼編輯器 /IDE 就已經(jīng)允許用戶在 UI 上應用以暗色為主的配色，且其中的大多數(shù)會默認使用暗色主題。
在開發(fā)工具中，暗色 UI 一方面能夠減少屏幕的刺眼感，對需要長時間面對屏幕工作的程序員們來說更為友好，另一方面暗色 UI 能夠給編寫代碼的程序員們帶來更好的沉浸感，提升程序員在代碼上的專注，因為在較暗的背景下，以亮色顯示的代碼在屏幕上會顯得十分突出，這個時候程序員就能更容易地忽略掉兩邊用暗色顯示的其他內(nèi)容，將專注力集中在中間的代碼上。
VSCode 就是一個典型的默認使用暗色主題的代碼編輯器，官方提供了一個默認的「Dark+」配色，還提供了一個和 Visual Studio 類似的「Dark」配色。
然而，如果你對暗色主題有較為極致的追求的話，那么 VSCode 的默認顏色主題可能會讓你感覺到一些不適。因為在這個主題中，微軟除了黑、灰外還加入了一抹藍色，這一抹藍色在暗色主題下容易讓人感覺有些扎眼，尤其是位于編輯器底部的藍色底欄。
好在 VSCode 是一個基于 Electron 打造的開源編輯器，基于 Electron 程序的靈活性，微軟向用戶開放了非常多非常靈活的自定義選項。
在 VSCode 上，用戶可以很方便地為 VSCode 做一個全新的、自定義的顏色主題，當然，他們也可以通過擴展市場下載其他用戶制作的顏色主題來替換 VSCode 默認的主題。
為了將 VSCode 的界面統(tǒng)一成比較舒適的暗色色調(diào)，讀者群的一位大佬開發(fā)了 Luke Dark Theme 這一顏色主題，這一主題上架 VSCode 擴展市場已經(jīng)有一段時間了，在這段時間內(nèi)這一主題收獲了大量的好評，甚至登上了市場「Trend this week」（本周趨勢）。
Luke Dark Theme 在 VSCode 官方默認暗色配色的基礎上將灰色的色調(diào)稍稍調(diào)淺了一些，同時統(tǒng)一了 VSCode 底欄的顏色。雖然整個主題的顏色稍有一些「冷淡」的感覺，但是在總體的視覺觀感上它比官方默認的主題是要舒服不少的。
默認主題中大塊的藍色在這一主題中被去除，同時左側文件被選中后的底色也統(tǒng)一成了灰色，修改后的界面中只有非常小的一部分用的是其他顏色。
這使得整個界面看上去非常和諧，不像 VSCode 的官方默認主題一樣因為顏色與顏色之間差異太大而讓人感覺較亮的顏色比較刺。
在這一主題中作者也縮小了灰色與灰色之間的深淺差異，進一步減小了整個界面的對比度，所以在應用這一主題后你能夠明顯察覺到界面變得更加柔和了。
上圖為 Luke Dark Theme，下圖為官方默認
這里筆者截取了 Luke Dark Theme 和官方默認的 Dark 主題的左上角界面，讀者朋友們可以通過上面這兩張圖詳細對比兩個主題在顯示效果上的差異。
就筆者的實際使用體驗而言，由于 Luke Dark Theme 界面更為柔和，在長時間的編碼下它更不容易給人帶來疲勞感。
除了界面的配色外，Luke Dark Theme 還對代碼高亮的顏色進行了一些調(diào)整，在 Luke Dark Theme 內(nèi)在 HTML、CSS 等語言的高亮中出現(xiàn)的藍色被黃色、紫色取代掉了，原先用于高亮字符串的深橙色以及變量名的白色在 Luke Dark Theme 則是被更改為了深淺不一的綠色。
高亮這方面的改動可能會給一些已經(jīng)習慣了官方高亮配色的朋友帶來一些使用上的障礙，尤其是在 HTML 上，大面積的淺色黃色可能會對編寫代碼產(chǎn)生一定程度的干擾。
總體上這一套高亮的配色和整個主題本身是比較搭配的，但是這個高亮應該是針對作者常用的一些語言打造的，這使得在 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，我們就能夠?qū)?VSCode 的高亮還原成默認狀態(tài)，同時 Luke Dark Theme 界面的更改仍然能夠保留下來。
修改后的效果如下圖所示：
在筆者個人看來官方默認的高亮在多數(shù)場景下還是要更舒適一些，因為在 HTML 等語言下大面積的黃色看上去并不怎么友好。
考慮到這個體驗是因人而異的，所以你可以根據(jù)自己的喜好來調(diào)整主題文件中的相關設置。在主題中還有很多其他的有關配色的選項，你可以在 Luke Dark Theme 的基礎上做一些更加細致的修改，迭代出一個最適合你自己的版本。
在筆者個人看來作者可以考慮參考一下官方默認主題的主題文件，用 include 的方式剝離一個使用默認高亮配色的版本，使這個主題能夠滿足更多 VSCode 用戶的需求。
筆者花了一些閑暇時間在 Luke Dark Theme 的基礎上對其做了一些修改，做了一個色調(diào)更暗的、采用官方默認高亮（包括終端）的版本，如果你有需要的話可以在讀者群中向筆者索要相關的主題文件。
改后的效果如下圖所示：
最近準備搭建一個簡單的文檔平臺，用于組內(nèi)的文檔管理。作為一個程序員，大多數(shù)情況下咱們寫文檔使用的都是markdown語法，比如wiki、hexo、github，然后在瀏覽器上展示。
目前大部分的編輯器都有自己的markdown插件并支持實時預覽，如下圖，
圖1
此圖是vscode編輯器，左側是markdown文件，右側是實時預覽的界面，咱們這次的目標就是將markdown在瀏覽器上展示成這個樣式。
為了將markdown在瀏覽器上展示就必須先將markdown轉(zhuǎn)化為html，有了明確的需求就可以去網(wǎng)上搜尋一下工具，我們很容易就能找到一個使用非常頻繁的工具——marked。
圖2
如圖2，它支持在頁面中編譯markdown代碼，但是我們更希望先在后臺完成編譯的工作再將編譯的產(chǎn)物放到頁面中使用，這樣頁面的性能會提示一丟丟，因此我們使用它的node方式。
圖3
如圖3，node編譯markdown的步驟也十分簡單，僅需以下幾步，
圖4
如圖4，左側是markdown編譯后的html，右側是在瀏覽器中展示的情況，此時完全沒有任何樣式，所以我們還需要為它配置主題。我們選用最流行的樣式——github-markdown-css，把它引入到文件中，再看看效果。
圖5
現(xiàn)在頁面已經(jīng)有樣式了，和github的readme展示的樣式一樣，但是你會發(fā)現(xiàn)兩個問題，
注意：編譯產(chǎn)物最外層需要包一層容器，容器的class名字為markdown-body，否則樣式不生效。
為了解決上面第一個問題，我們將marked模塊換成markdown-it模塊，用法如下，
圖6
此時markdown的大部分語法都已經(jīng)支持了，但仍有個別語法不支持，不過不要緊，我們可以將markdown-it的html參數(shù)設置為true，這樣用戶可以直接用html語法寫markdown。
代碼塊沒有高亮是不可接受的，這會讓同志們的瀏覽欲望大大降低。對比了一下highlight.js，我選擇了prism.js。不為別的，就是因為它滿足了我的要求。有人說prismjs比highlight.js對樣式控制的更精細，不過I don't care it。
圖7
如圖7，我一眼就看中了這個主題，有趣。那還等什么，直接把js和css都down下來，引入頁面。現(xiàn)在咱們再去看看效果，如下圖，
圖8
和我的編輯器主題一樣。
到這里我們已經(jīng)完成了我們的需求。
將markdown轉(zhuǎn)化為html其實就兩步，一是選擇編譯工具，需要盡可能多的支持markdown語法，二是選主題，需要看著養(yǎng)眼。
喜歡我的文章就關注我吧，有問題可以發(fā)表評論，我們一起學習，共同成長！
VSCode中，有許多與HTML相關的插件可以大大提高開發(fā)效率和便利性。以下是一些值得推薦的插件，它們各自具有獨特的功能和優(yōu)點，可以幫助您更好地編寫、調(diào)試和預覽HTML代碼。
1. HTML Snippets: 這個插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結構和元素。只需輸入簡短的縮寫，即可自動生成相應的HTML代碼，大大提高了編寫速度。
2. Emmet: Emmet是一個強大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復雜的HTML結構和嵌套元素。Emmet還提供了許多自定義選項，可以根據(jù)您的需求進行靈活配置。
3. HTML Boilerplate: 這個插件提供了一個HTML模板，包含了常見的HTML結構和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個插件，您可以快速創(chuàng)建一個基本的HTML框架，然后在此基礎上進行進一步的開發(fā)。
4. HTML Preview: HTML Preview插件可以在VSCode中實時預覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點擊預覽按鈕，即可在側邊欄中查看HTML頁面的渲染效果。這對于調(diào)試和預覽HTML代碼非常方便。
5. Color Highlight: Color Highlight插件可以自動識別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發(fā)現(xiàn)和修改顏色值，提高了代碼的可讀性和可維護性。
6. HTML Boilerplate Generator: 這個插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標簽、字符編碼、視口設置等。它還提供了一些自定義選項，可以根據(jù)您的需求生成符合規(guī)范的HTML代碼。
7. HTML CSS Support: 這個插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動完成和錯誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。
8. HTML/CSS/JS Prettify: 這個插件可以對HTML、CSS和JavaScript代碼進行格式化，使其更加整潔和易讀。您可以自定義格式化規(guī)則，也可以使用默認的規(guī)則進行快速格式化。這對于保持代碼風格一致和提高代碼可讀性非常有幫助。
9. HTML Validator: HTML Validator插件可以對HTML代碼進行驗證，檢查其是否符合W3C規(guī)范。它可以檢測出潛在的錯誤和不符合規(guī)范的地方，并給出相應的提示和建議。這對于編寫符合標準的HTML代碼非常有幫助。
10. Live Server: Live Server插件可以在本地啟動一個實時服務器，讓您在瀏覽器中實時預覽HTML、CSS和JavaScript代碼的效果。它支持自動刷新和熱更新，可以實時反映代碼的變化。這對于前端開發(fā)和調(diào)試非常方便。
以上是一些值得推薦的VSCode中與HTML相關的插件。它們各自具有獨特的功能和優(yōu)點，可以幫助您提高開發(fā)效率和便利性。當然，具體選擇哪些插件還需要根據(jù)您的實際需求和喜好來決定。希望這些推薦能對您有所幫助！
?
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
