如何在代码片段中添加链接？实现Bootstrap CSS/JS片段一键触发

一、代码片段中添加链接 #

直接在代码片段的上下方添加Markdown格式的链接即可，比如你需要的Bootstrap文档链接：

• Bootstrap 5.2 入门指南
• 输入链接描述文本

二、创建输入「!」即可调用的Bootstrap代码片段 #

以下是主流编辑器的设置方法：

VS Code #

1. 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入「Configure User Snippets」，选择html.json。
2. 添加以下配置：

{
  "Bootstrap 5.2 Starter": {
    "prefix": "!",
    "body": [
      "<!doctype html>",
      "<html lang=\"en\">",
      "  <head>",
      "    <meta charset=\"utf-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
      "    <title>Bootstrap demo</title>",
      "    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">",
      "  </head>",
      "  <body>",
      "    <h1>Hello, world!</h1>",
      "    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script>",
      "  </body>",
      "</html>",
      "",
      "[Bootstrap 5.2 入门指南](https://getbootstrap.com/docs/5.2/getting-started/introduction/)",
      "[输入链接描述文本](https://getbootstrap.com/docs/5.2/getting-started/introduction/)"
    ],
    "description": "Bootstrap 5.2 starter template with docs links"
  }
}

3. 保存后，在HTML文件输入!即可调出完整内容。

Sublime Text #

1. 打开「Tools > Developer > New Snippet」。
2. 替换为以下代码：

<snippet>
  <content><![CDATA[
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

[Bootstrap 5.2 入门指南](https://getbootstrap.com/docs/5.2/getting-started/introduction/)
[输入链接描述文本](https://getbootstrap.com/docs/5.2/getting-started/introduction/)
]]></content>
  <tabTrigger>!</tabTrigger>
  <scope>text.html</scope>
  <description>Bootstrap 5.2 Starter Template</description>
</snippet>

3. 保存为bootstrap-starter.sublime-snippet到用户片段目录，输入!即可调用。

三、最终生成内容 #

调用后会输出：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

以及对应的链接：

• Bootstrap 5.2 入门指南
• 输入链接描述文本

内容的提问来源于stack exchange，提问作者Ankit Singh Tanwar