vscode md樣式自定義


vscode md插件安裝

### Markdown Preview Enhanced
具體的使用可以查看官網文檔。
https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/customize-css

  • 插件安裝完成后 右上角圖表可以設置側邊展示,或者側邊單獨的展示區域(不受vscode 主體背景色影響)
    ### 樣式自定義
    打開命令面版 輸入如下

Markdown Preview Enhanced: Customize Css

編輯自己的樣式--我直接找的其它人的css

.markdown-preview.markdown-preview { // 在這里編寫你的樣式 // 例如: // color: blue; // 改變字體顏色 // font-size: 14px; // 改變字體大小 // 自定義 pdf 導出樣式 @media print { }

// 自定義 prince pdf 導出樣式
&.prince {
}

// 自定義 presentation 樣式
.reveal .slides {
// 修改所有幻燈片
}

// 自定義 presentation 樣式
.slides > section:nth-child(1) {
// 修改 第 1 個幻燈片
}
}

.md-sidebar-toc.md-sidebar-toc {
// 邊欄目錄樣式
}

css 樣式地址:選擇你中意的 http://md.aclickall.com/
直接 復制到你的 style.less 中保存就OK了。然后你就可以看到效果了

直接引用本地樣式 -我沒用過

Markdown Preview Enhanced 允許你對於不同的 markdown 文件定義不同的樣式。 你可以在 front-matter 設置 markdown 文檔的 id 和 class。 你可以在你的 markdown 文件中非常簡單地 引用 less 或者 css 文件。

---
id"my-id"
class"my-class1 my-class2"
---

@import "my-style.less"

# Heading1

my-style.less 如下:

#my-id {
  background-color: #222;
  color: #fff;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
  }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM