在 VS Code 中，如果你想让你 Markdown 文件的预览（Preview）使用在线的 CSS 样式表，你可以通过修改 settings.json 文件中的 markdown.styles 设置来实现。

这是具体的操作步骤：

步骤一：打开 settings.json Link to heading

你可以选择在用户设置 (User Settings) 中应用这个样式（对所有项目生效），或者在工作区设置 (Workspace Settings) 中应用（仅对当前项目生效）。

  1. 全局用户设置：
    • 按下 Ctrl + Shift + P (Windows/Linux) 或 Cmd + Shift + P (Mac) 打开命令面板。
    • 输入 Preferences: Open User Settings (JSON) 并选择它。
  2. 工作区设置（推荐，因为这样样式表就与项目关联）：
    • 在你的项目根目录下找到或创建一个 .vscode 文件夹。
    • 在 .vscode 文件夹内找到或创建一个 settings.json 文件。

步骤二：添加或修改 markdown.styles 设置 Link to heading

在打开的 settings.json 文件中，添加或修改 markdown.styles 数组，将在线 CSS 文件的完整 HTTPS URL 作为数组元素添加进去。

示例：

{
    "markdown.styles": [
        "https://example.com/path/to/your/online-style.css",
        // 如果还需要其他样式，可以继续添加
        "https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@gh-pages/github-markdown.css" 
    ]
}

注意事项和限制 Link to heading

  • 必须是 HTTPS URL： 为了安全起见，VS Code 的 Markdown 预览通常只允许加载 https:// 开头的在线样式表，或者当前工作区内的本地文件（相对路径或绝对路径）。

  • 内容安全策略 (CSP)： VS Code 的 Webview（用于渲染 Markdown 预览）有自己的安全限制。虽然直接使用 HTTPS URL 在大部分情况下是可行的，但如果远程服务器设置了严格的跨域限制（CORS）或者 VS Code 自身的安全策略更新，可能会导致加载失败。

  • 替代方案（推荐本地文件）： 最稳定和最推荐的方式是将在线 CSS 文件下载到你的项目工作区内（例如，放在一个叫 styles 的文件夹里），然后使用相对路径引用它。

    • 本地文件示例： 假设你将 online-style.css 下载到了项目根目录下的 styles 文件夹中。
    {
    "markdown.styles": [
        "styles/online-style.css" // 使用工作区内的相对路径
    ]
}

  • 实时预览： 修改 settings.json 后，你需要关闭并重新打开 Markdown 预览（Ctrl + K V 或 Cmd + K V）才能看到新样式的效果。