BlackWhite 主题语法指南

本文档展示了 BlackWhite 主题支持的所有 Markdown 和 MDX 语法。

1. 标签高亮

支持 6 种颜色的标签高亮，用于强调重要内容。

可用颜色

蓝色高亮 - 用于一般提示

橙色高亮 - 用于警告提醒

灰色高亮 - 用于次要信息

粉色高亮 - 用于特别标注

黄色高亮 - 用于注意事项

绿色高亮 - 用于成功状态

语法示例

[!labelblue]@这是蓝色标签@
[!labelorange]@这是橙色标签@
[!labelgrey]@这是灰色标签@
[!labelpink]@这是粉色标签@
[!labelyellow]@这是黄色标签@
[!labelgreen]@这是绿色标签@

2. 容器区块

用于组织和突出显示特定类型的内容。

Info 信息框

这是一个信息提示框，用于提供补充说明和额外信息。

Note 笔记框

这是一个笔记框，用于记录重要的要点和备忘内容。

Warning 警告框

这是一个警告框，用于提醒用户注意潜在问题。

Danger 危险框

这是一个危险框，用于警示严重错误或危险操作。

Tip 提示框

这是一个提示框，用于分享有用的技巧和建议。

Success 成功框

这是一个成功框，用于显示操作成功或积极结果。

语法示例

:::info
信息内容
:::

:::note
笔记内容
:::

:::warning
警告内容
:::

:::danger
危险内容
:::

:::tip
提示内容
:::

:::success
成功内容
:::

3. 自定义区块

系统支持7种预定义的容器类型：

info - 信息提示
note - 笔记记录
warning - 警告提醒
danger - 危险警示
tip - 技巧建议
success - 成功状态
primary - 主要内容

示例区块

这是一个主要内容区块，可以用于突出显示重要信息。

语法示例

:::primary
主要内容
:::

4. Markdown 基础格式

文本样式

粗体文本
斜体文本
粗斜体文本
~~删除线~~
行内代码

列表

无序列表

第一项
第二项
- 子项 2.1
- 子项 2.2
第三项

有序列表

第一项
第二项
第三项

任务列表

已完成任务
未完成任务

引用

这是一段引用文本。可以有多行。

分隔线

5. 代码块

行内代码

使用 反引号 包裹代码。

代码块

代码块使用三个反引号包裹，并指定语言：

function hello() {
  console.log('Hello, BlackWhite!');
}

语法高亮

支持多种语言的语法高亮：

JavaScript

const greeting = 'Hello, World!';
console.log(greeting);

Python

def greet():
    print("Hello, World!")

CSS

.container {
  max-width: 1200px;
  margin: 0 auto;
}

Bash

npm install
npm run dev

6. 表格

列1	列2	列3
内容1	内容2	内容3
内容4	内容5	内容6

对齐方式

左对齐	居中	右对齐
内容1	内容2	内容3
内容4	内容5	内容6

7. 链接和图片

链接

[文本链接](https://example.com)

图片

![替代文本](图片URL)

8. 分类和标签

在文章 Frontmatter 中定义：

---
title: '文章标题'
description: '文章描述'
pubDate: 2024-01-15
category: '技术'
tags: ['JavaScript', 'Astro', '前端开发']
draft: false
---

9. 快速参考

标签颜色速查

颜色	语法
蓝色	`[!labelblue]@内容@`
橙色	`[!labelorange]@内容@`
灰色	`[!labelgrey]@内容@`
粉色	`[!labelpink]@内容@`
黄色	`[!labelyellow]@内容@`
绿色	`[!labelgreen]@内容@`

容器类型速查

类型	语法	用途
信息	`[!info]@内容@`	补充说明
笔记	`[!note]@内容@`	重要要点
警告	`[!warning]@内容@`	注意事项
危险	`[!danger]@内容@`	错误警示
提示	`[!tip]@内容@`	技巧建议
成功	`[!success]@内容@`	成功状态

提示：将本文档作为参考，在实际写作时根据需要选择合适的语法和标签样式。