登录
为 Halo 博客主题添加 markdown 提示块语法渲染支持
  瞎鼓捣   网站搭建

为 Halo 博客主题添加 markdown 提示块语法渲染支持

为 Halo 添加 md 提示块语法渲染

 次点击
 26 分钟阅读

什么是提示块语法

markdown 中的一种语法，在不同笔记软件中兼容性不同，可能仅支持部分形式。

> [!note]
> 说明内容（Note）

> [!abstract]
> 摘要内容（Abstract）

> [!info]
> 信息说明（Info）

> [!todo]
> 待办事项（Todo）

> [!tip]
> 实用提示（Tip）

> [!success]
> 成功状态说明（Success）

> [!question]
> 提出的问题或思考点（Question）

> [!warning]
> 警告内容（Warning）

> [!failure]
> 失败原因或错误说明（Failure）

> [!danger]
> 高风险或危险操作提示（Danger）

> [!bug]
> 已知缺陷或错误说明（Bug）

> [!example]
> 示例内容（Example）

> [!quote]
> 引用内容（Quote）

> [!important]
> 重要信息（Important）

> [!caution]
> 需要特别注意的事项（Caution）

‍

适配方法

选择喜欢的样式，在如图所示的主题扩展设置中粘贴并保存对应代码：

样式一

CSS

/* Default Light Mode */
.callout {
  border-left: 4px solid var(--callout-color);
  padding: 14px 18px;
  margin: 18px 0;
  border-radius: 10px;
  background: var(--callout-bg);
  box-shadow: var(--callout-shadow);
  transition: all 0.2s ease;
}

.callout-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.callout-icon {
  font-size: 18px;
}

.callout-content {
  font-size: 14px;
  line-height: 1.65;
}

/* Light Mode Variables */
:root {
  --callout-shadow: 0 2px 5px rgb(0 0 0 / 6%);
}

/* —— Light Mode Types —— */
.callout.note      { --callout-color:#4c9aff; --callout-bg:#eaf3ff; }
.callout.info      { --callout-color:#0984e3; --callout-bg:#eef7ff; }
.callout.abstract  { --callout-color:#6c5ce7; --callout-bg:#f4f2ff; }
.callout.todo      { --callout-color:#636e72; --callout-bg:#f5f5f5; }
.callout.tip       { --callout-color:#00b894; --callout-bg:#e7fdf4; }
.callout.success   { --callout-color:#00b894; --callout-bg:#e7fdf4; }
.callout.question  { --callout-color:#fdcb6e; --callout-bg:#fff8e6; }
.callout.warning   { --callout-color:#fdcb6e; --callout-bg:#fff8e6; }
.callout.caution   { --callout-color:#e17055; --callout-bg:#fff3e8; }
.callout.important { --callout-color:#a29bfe; --callout-bg:#f5f3ff; }
.callout.failure   { --callout-color:#d63031; --callout-bg:#ffeaea; }
.callout.danger    { --callout-color:#d63031; --callout-bg:#ffeaea; }
.callout.bug       { --callout-color:#6c5ce7; --callout-bg:#f4f2ff; }
.callout.example   { --callout-color:#a29bfe; --callout-bg:#f7f5ff; }
.callout.quote     { --callout-color:#636e72; --callout-bg:#f5f5f5; }

/* —— Dark Mode —— */
@media (prefers-color-scheme: dark) {
  .callout {
    --callout-shadow: 0 2px 6px rgb(0 0 0 / 30%);
    color: #E4E4E7;
  }

  .callout.note      { --callout-bg:#1d2533; }
  .callout.info      { --callout-bg:#162133; }
  .callout.abstract  { --callout-bg:#221d33; }
  .callout.todo      { --callout-bg:#2a2a2a; }
  .callout.tip       { --callout-bg:#112820; }
  .callout.success   { --callout-bg:#112820; }
  .callout.question  { --callout-bg:#2e2505; }
  .callout.warning   { --callout-bg:#2e2505; }
  .callout.caution   { --callout-bg:#2b1f17; }
  .callout.important { --callout-bg:#221f33; }
  .callout.failure   { --callout-bg:#331d1d; }
  .callout.danger    { --callout-bg:#331d1d; }
  .callout.bug       { --callout-bg:#241d33; }
  .callout.example   { --callout-bg:#2a2248; }
  .callout.quote     { --callout-bg:#2a2a2a; }
}

JS

document.addEventListener("DOMContentLoaded", () => {
  const blocks = document.querySelectorAll("blockquote");

  const icons = {
    note: "📝",
    abstract: "📘",
    info: "ℹ️",
    todo: "☑️",
    tip: "💡",
    success: "✅",
    question: "❓",
    warning: "⚠️",
    caution: "🚨",
    important: "❗️",
    failure: "❌",
    danger: "🚫",
    bug: "🐞",
    example: "📌",
    quote: "💬"
  };

  const titles = {
    note: "说明",
    abstract: "摘要",
    info: "信息",
    todo: "待办",
    tip: "提示",
    success: "成功",
    question: "问题",
    warning: "警告",
    caution: "注意",
    important: "重要",
    failure: "失败",
    danger: "危险",
    bug: "错误",
    example: "示例",
    quote: "引用"
  };

  blocks.forEach(b => {
    const raw = b.innerText.trim().split("\n");
    const firstLine = raw[0].trim();

    const match = firstLine.match(/^\[!(\w+)\]\s*(.*)$/i);
    if (!match) return;

    const type = match[1].toLowerCase();
    if (!icons[type]) return;

    const customTitle = match[2].trim();
    const title = customTitle || titles[type];

    const contentLines = raw.slice(1).join("\n").trim();

    const wrap = document.createElement("div");
    wrap.className = `callout ${type}`;

    const titleEl = document.createElement("div");
    titleEl.className = "callout-title";

    const iconEl = document.createElement("span");
    iconEl.className = "callout-icon";
    iconEl.textContent = icons[type];

    const titleTextEl = document.createElement("span");
    titleTextEl.textContent = title;

    titleEl.appendChild(iconEl);
    titleEl.appendChild(titleTextEl);

    const content = document.createElement("div");
    content.className = "callout-content";
    content.innerHTML = contentLines.replace(/\n/g, "<br>");

    wrap.appendChild(titleEl);
    wrap.appendChild(content);

    b.replaceWith(wrap);
  });
});

‍

样式二

CSS

/* 简约版 Callout 样式 */
.callout {
  border-left: 3px solid var(--callout-color);
  padding: 6px 0 6px 14px;
  margin: 14px 0;
  background: transparent;
}

.callout-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--callout-color);
}

.callout-icon {
  font-size: 16px;
}

.callout-content {
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
}

/* 不同类型的颜色定义 - 优化配色与图标贴合 */
.callout.note      { --callout-color: #5B9FED; } /* 📝 蓝色笔记 */
.callout.info      { --callout-color: #3B82F6; } /* ℹ️ 信息蓝 */
.callout.abstract  { --callout-color: #8B5CF6; } /* 📘 紫色摘要 */
.callout.todo      { --callout-color: #6B7280; } /* ☑️ 灰色待办 */
.callout.tip       { --callout-color: #10B981; } /* 💡 绿色提示 */
.callout.success   { --callout-color: #22C55E; } /* ✅ 成功绿 */
.callout.question  { --callout-color: #F59E0B; } /* ❓ 橙黄问号 */
.callout.warning   { --callout-color: #F59E0B; } /* ⚠️ 警告橙 */
.callout.caution   { --callout-color: #EF4444; } /* 🚨 红色警报 */
.callout.important { --callout-color: #DC2626; } /* ❗️ 重要红 */
.callout.failure   { --callout-color: #DC2626; } /* ❌ 失败红 */
.callout.danger    { --callout-color: #B91C1C; } /* 🚫 危险深红 */
.callout.bug       { --callout-color: #A855F7; } /* 🐞 紫色Bug */
.callout.example   { --callout-color: #8B5CF6; } /* 📌 示例紫 */
.callout.quote     { --callout-color: #9CA3AF; } /* 💬 引用灰 */

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .callout-title {
    color: var(--callout-color);
  }
  
  .callout.warning   { --callout-color: #fdcb6e; }
  .callout.important { --callout-color: #ff9f43; }
}

JS

和样式一相同

效果展示

适配前

适配后

样式一

样式二

本站当前使用的样式

思源笔记中兼容的样式：

引述

[!NOTE]
note

[!TIP]
tip

[!IMPORTANT]
important

[!WARNING]
warning

[!CAUTION]
caution

其他样式（本文第一节中的语法示例）：

[!note] note
说明内容（Note）

[!abstract] abstract
摘要内容（Abstract）

[!info] info
信息说明（Info）

[!todo] todo
待办事项（Todo）

[!tip] tip
实用提示（Tip）

[!success] success
成功状态说明（Success）

[!question] question
提出的问题或思考点（Question）

[!warning] warning
警告内容（Warning）

[!failure] failure
失败原因或错误说明（Failure）

[!danger] danger
高风险或危险操作提示（Danger）

[!bug] bug
已知缺陷或错误说明（Bug）

[!example] example
示例内容（Example）

[!quote] quote
引用内容（Quote）

[!important] important
重要信息（Important）

[!caution] caution
需要特别注意的事项（Caution）

© 本文著作权归作者所有，未经许可不得转载使用。