Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Markdown LimeNew to Visual Studio Code? Get it now.
Markdown Lime

Markdown Lime

ligbyte

|
1 install
| (0) | Free
在 VSCode 中以 Markdown 编辑器的样式预览 Markdown 文件,预览样式与 Web 版保持一致,支持主题切换、色盘取色与一键复制到编辑器。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Markdown 编辑器

文章 Markdown 在线编辑器,使用 markdown 语法创建一篇简介美观大方的图文。

Markdown 编辑器桌面应用

功能特性

开发计划和一些功能介绍,有需求可以在 issue 中提,使得工具变得更加完善。下面示例用于 web 应用中效果展示。

  • [x] 支持 Markdown 所有基础语法
  • [x] 支持自定义 CSS 样式
  • [x] 支持主题选择 & 编辑预览。
  • [x] 支持明暗两种主题预览。
  • [ ] 支持代码块主题样式选择。
  • [x] 支持色盘取色,快速替换文章整体色调
  • [x] 支持 URL 参数加载 Markdown 内容。
  • [x] 支持 URL 参数选择预览主题。
  • [x] CI 自动生成 Electron 桌面应用。

数学公式

$\c = \pm\sqrt{a^2 + b^2}$ 和 $C_L$ 数学公式行内显示

L = \frac{1}{2} \rho v^2 S C_L

支持代码块样式

下面是 jsx 代码块展示示例,并高亮代码,用于 web 应用中效果展示。

function Demo() {
  return <div className="demo">Hello World!</div>
}

下面是 css 代码块展示示例,并高亮代码,用于 web 应用中效果展示。

li {
  font-size: 16px;
  margin: 0;
  line-height: 26px;
  color: rgb(30 41 59);
  font-family:-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif;
}

支持内联代码

用于 web 应用中效果展示。

Inline Code {code: 0}

支持表格

表格无法使用自定义样式,暂时没找到解决途径

Header 1 Header 2
Key 1 Value 1
Key 2 Value 2
Key 3 Value 3

支持 GFM 脚注

这是一个简单的 Markdown[^1] 语法的脚注[^2]。 页面最后有一些额外的文字描述。注意这不是完整的注脚[^3]特性。

[^1]: GitHub 风格的 Markdown 规范 https://github.github.com/gfm/ [^2]: 脚注 https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/ [^3]: 文章不支持锚点跳转和打开第三方 URL 超链接,所以不支持完整的注脚特性。

支持注释

<ruby>
  汉 <rt>Han</rt>
</ruby>

汉字注音效果: 汉 Han 字 zi 拼 pin 音 yin 注 zhu 音 yin

支持自定义样式

在 Markdown 中 HTML 注释也可以用在 markdown 中,利用这一特点,为一些内容自定一样式。使用 HTML 注释 <!--rehype:xxx--> 让 Markdown 支持样式自定义。

## 定义标题样式
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

支持对某些文字变更样式,如_文字颜色_<!--rehype:style=color: red;-->,文字颜色将被设置为红色(red)。

⚠️ 注意:这一特性可能适用于有一定 css 前端基础知识的用户,不过它也非常简单,使用 <!--rehype:style= 开始,--> 结束,中间包裹 css 样式,如 color: red; 设置文字红色。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft