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