Visual Studio Code 已經(jīng)是一個(gè)很棒的 Markdown 編輯器，但是本文介紹的這些擴(kuò)展和自定義使它變得更好更好。 如果你為網(wǎng)絡(luò)寫(xiě)手，你可能會(huì)想看看 Markdown。有很多適合網(wǎng)絡(luò)作家的 Markdown 應(yīng)用程序。但是像微軟的 Visual Studio Code (VS Code) 這樣的免費(fèi)代碼編輯器可能更強(qiáng)大。

下載并安裝 VS Code

首先，下載 VS Code 或其開(kāi)源替代品 VS Codium。每個(gè)版本都可用于所有主要的桌面操作系統(tǒng)。 下載并安裝 VS Code 后，運(yùn)行應(yīng)用程序開(kāi)始。

安裝字?jǐn)?shù)擴(kuò)展 Word Count

首先添加一個(gè)字計(jì)數(shù)器。有許多可用的擴(kuò)展可以處理這個(gè)問(wèn)題。最能區(qū)分實(shí)際單詞和代碼或文件名的方法是 Microsoft 自己的 Word Counter 擴(kuò)展。



該安裝好Word Count 擴(kuò)展后。通過(guò)打開(kāi)一個(gè)新的 Markdown 文件并輸入來(lái)測(cè)試它。您現(xiàn)在應(yīng)該在界面的左下方看到一個(gè)單詞計(jì)數(shù)器：

安裝拼寫(xiě)檢查擴(kuò)展

您還需要添加拼寫(xiě)檢查功能。與單詞計(jì)數(shù)器一樣，有許多擴(kuò)展可以處理拼寫(xiě)檢查。最受歡迎的是Street Side Software 的Code Spell Check，因?yàn)樗卸喾N語(yǔ)言版本。

下載：Code Spell Check



安裝好代碼拼寫(xiě)檢查擴(kuò)展（Code Spell Check）。通過(guò)打開(kāi)一個(gè)新的 Markdown 文件并輸入拼寫(xiě)錯(cuò)誤的單詞來(lái)測(cè)試它。您應(yīng)該在這些單詞下方看到一條藍(lán)色波浪線(xiàn)以及界面右下方的錯(cuò)誤計(jì)數(shù)：

自定義錯(cuò)誤曲線(xiàn)

這個(gè)拼寫(xiě)檢查擴(kuò)展的最大問(wèn)題是用于識(shí)別錯(cuò)誤的曲線(xiàn)的淡藍(lán)色。它傾向于融入深色主題的背景中，并被重用于其他 Markdown 元素。 您可以嘗試將其更改為大膽的紅色，就像您希望在文字處理器中看到的那樣：

點(diǎn)擊界面左下角的齒輪圖標(biāo)。

點(diǎn)擊設(shè)置。

單擊工作臺(tái)，然后單擊外觀。

向下滾動(dòng)到自定義顏色 Color Customization：

單擊settings.json 中的編輯。

將以下代碼粘貼到在新選項(xiàng)卡中打開(kāi)的編輯器中：

"editorInfo.foreground": "#ff0000"

關(guān)閉并保存文件。

現(xiàn)在，如果你拼錯(cuò)了一個(gè)單詞，VS Code 會(huì)用一個(gè)鮮紅色的曲線(xiàn)裝飾它：

忽略誤報(bào)

拼寫(xiě)檢查器可能無(wú)法識(shí)別某些特定行業(yè)的術(shù)語(yǔ)或?qū)Ｓ忻~，如公司名稱(chēng)。例如，在上面的屏幕截圖中，VSCode 將縮寫(xiě)“linuxmi”高亮顯示為拼寫(xiě)錯(cuò)誤。 要停止將這些詞視為錯(cuò)誤，您需要將它們添加到您的用戶(hù)設(shè)置中。

右鍵單擊您希望拼寫(xiě)檢查器忽略的單詞。

將鼠標(biāo)懸停在Spelling上并選擇Add Words to User Settings。

從現(xiàn)在開(kāi)始，拼寫(xiě)檢查將不再將這些單詞識(shí)別為不正確：

安裝 Copy Markdown as HTML 擴(kuò)展

接下來(lái)，將安裝 Copy Markdown as HTML 擴(kuò)展，以便您可以復(fù)制和粘貼格式化的 Markdown。

現(xiàn)在您應(yīng)該能夠從 VS Code 復(fù)制 Markdown 并將其作為干凈的 HTML 粘貼到 CMS 中。要對(duì)此進(jìn)行測(cè)試：

選擇一些 Markdown 文本。

在視圖菜單中打開(kāi)命令面板，或者按CTRL+Shift+P。

選擇Markdown: Copy as HTML:

將復(fù)制的 Markdown 粘貼到新的 HTML 文件中。

您應(yīng)該看到復(fù)制的 Markdown 已正確粘貼為 HTML：

自定義預(yù)覽窗格

默認(rèn)情況下，預(yù)覽窗格將與當(dāng)前 VS Code 主題具有相同的樣式。 但是，您可能希望預(yù)覽更準(zhǔn)確地反映您的內(nèi)容的最終目的地。您可以自定義預(yù)覽窗格，使您的 Markdown 看起來(lái)就像它已經(jīng)在您要發(fā)布到的網(wǎng)站上一樣。 您可以使用任何您想要的網(wǎng)站。

創(chuàng)建一個(gè)新文件并將其命名為“linuxmi.css”

將以下示例 CSS 代碼粘貼到文件中：

body {
  background-color: #fff;
  color: #2c2c2c;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7em;
  max-width: 750px;
}
 
h1 {
  font-size: 38px;
  font-weight: 800;
}
 
h2 {
  font-size: 34px;
  font-weight: 700;
}
 
h3 {
  font-size: 24px;
  font-weight: 700;
}
 
a {
  border-bottom: 2px solid #bf0d0b;
  color: #bf0d0b;
  font-weight: 700;
}
 
a:hover {
  color: #fff;
  background: #bf0d0b;
}
 
strong {
  font-weight: bold;
}

關(guān)閉并保存文件。

點(diǎn)擊界面左下角的齒輪圖標(biāo)。

點(diǎn)擊設(shè)置。

點(diǎn)擊Extensions然后Markdown。

向下滾動(dòng)到Markdown: Styles并單擊添加項(xiàng)。

輸入您的linuxmi.css文件的路徑，例如：

/home/linuxmi/www.linuxmi.com/linuxmi.css

單擊確定。

一旦你完成了這些，你應(yīng)該最終得到一個(gè)看起來(lái)很像這篇文章的預(yù)覽窗格。

編輯器主題

默認(rèn)的 VS Code 主題有深色和淺色兩種，每種都有高對(duì)比度版本。但就像任何好的代碼編輯器一樣，有很多很棒的第三方主題可用。

如果您更喜歡文字處理器的外觀而不是代碼編輯器的外觀，我推薦 huacat 的 Office 主題：

?

如果您更喜歡代碼編輯器，Dracula、Gruvbox、Material（見(jiàn)下面的屏幕截圖）和 Nord 等常見(jiàn)主題都可以從擴(kuò)展市場(chǎng)獲得。

?

要安裝新主題：

點(diǎn)擊界面左下角的齒輪圖標(biāo)。

點(diǎn)擊擴(kuò)展。

搜索上述任何主題，或簡(jiǎn)單地將類(lèi)別過(guò)濾為主題并瀏覽可用的內(nèi)容。

VS Code 是終極 Markdown 編輯器嗎？

那么，VSCode 是網(wǎng)頁(yè)內(nèi)容的終極 Markdown 編輯器嗎？開(kāi)箱即用，可能不是。但它是可擴(kuò)展的。 單詞計(jì)數(shù)器、拼寫(xiě)檢查器、將 Markdown 復(fù)制為 HTML、預(yù)覽自定義設(shè)置和主題只是表面上的東西。有一個(gè)充滿(mǎn) VS Code 擴(kuò)展的生態(tài)系統(tǒng)，你可以自由地把它變成你自己的。 如果還有什么疑問(wèn)與建議，請(qǐng)?jiān)谙旅娴脑u(píng)論框里告訴我們能。

審核編輯：湯梓紅