Game1024の博客写作指南

一篇全面的博客写作指南，涵盖 Markdown 语法、代码块、数学公式、Mermaid 图表等常用写作功能的使用方法与效果展示。

2026年2月7日 23:55 - 次阅读 828 字阅读约 4 分钟

有序列表

item 1
item 2
item 3

1. item 1
2. item 2
3. item 3

无序列表

item 1
item 2
item 3

- item 1
- item 2
- item 3

删除线

~~这是一个删除线示例。~~

~~这是一个删除线示例。~~

代码块

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

```cpp
#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}
```

代码标题

通过title属性，可以给代码块添加标题

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

```cpp title="main.cpp"
#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}
```

展开/收起

可以在代码块的语法中添加collapse属性来添加的展开/收起

int main () {
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    return 0;
}

```cpp title="main.cpp" collapse
int main () {
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    printf("Hello, World!\n");
    return 0;
}
```

高亮行

可以在代码块的语法中使用{ }高亮指定行，支持单行高亮和多行高亮

#include <stdio.h>

int main () {
  printf("Hello, World!\n");
  return 0;
}

```cpp title="main.cpp" {1,4-5}
#include <stdio.h>

int main () {
  printf("Hello, World!\n");
  return 0;
}
```

也可以使用ins=和del=来高亮指定行，分别使用不同的颜色来表示新增和删除的代码行

int main () {
  printf("Hello, World!\n");
  return 0;
}

```cpp title="main.cpp" ins={2,3} del={4}
int main () {
  printf("Hello, World!\n");
  return 0;
}
```

专注模式

当添加focus属性后，代码块将进入专注模式，未高亮的行会降低透明度

#include <stdio.h>

int main () {
  printf("Hello, World!\n");
  return 0;
}

```cpp title="main.cpp" {1,4-5} focus
#include <stdio.h>

int main () {
  printf("Hello, World!\n");
  return 0;
}
```

标记关键词

可以在代码块的语法中使用mark=/regex/flags来标记关键词

int main () {
  printf("Hello, World!\n");
  return 0;
}

```cpp title="main.cpp" mark=/printf/g
int main () {
  printf("Hello, World!\n");
  return 0;
}
```

行号

可以在代码块的语法中添加lineno来显示行号

#include <stdio.h>

int main () {
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");    
  
  return 0;
}

```cpp title="main.cpp" lineno
#include <stdio.h>

int main () {
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");
  printf("Hello, World!\n");    
  
  return 0;
}
```

引用

这是一个引用示例。

扩展语法

Katex 数学公式

块级公式

E = mc^2

$$
E = mc^2
$$

行内公式

爱因斯坦的质能方程是 $E = mc^2$ ，其中 $E$ 是能量， $m$ 是质量， $c$ 是光速。

爱因斯坦的质能方程是 $E = mc^2$，其中 $E$ 是能量，$m$ 是质量，$c$ 是光速。

提示框

Note

这是一个 note 类型的提示框。

Tip

这是一个 tip 类型的提示框。

Important

这是一个 important 类型的提示框。

Warning

这是一个 warning 类型的提示框。

Caution

这是一个 caution 类型的提示框。

:::note
这是一个 note 类型的提示框。
:::

:::tip
这是一个 tip 类型的提示框。
:::

:::important
这是一个 important 类型的提示框。
:::

:::warning
这是一个 warning 类型的提示框。
:::

:::caution
这是一个 caution 类型的提示框。
:::

Steps

创建一个新项目

使用你喜欢的包管理器创建项目。

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

安装依赖

运行 npm install 安装所有依赖。
启动开发服务器

使用 npm run dev 启动开发服务器。

:::steps

1. 创建一个新项目

   使用你喜欢的包管理器创建项目。

   ```cpp title="main.cpp"
   #include <stdio.h>

   int main() {
       printf("Hello, World!\n");
       return 0;
   }
   ```

2. 安装依赖

   运行 `npm install` 安装所有依赖。

3. 启动开发服务器

   使用 `npm run dev` 启动开发服务器。

:::

Tabs

效果预览

npm install astro

bun add astro

pnpm add astro

yarn add astro

代码语法

::::tabs
:::tab{label="npm"}
```bash
npm install astro
```
:::

:::tab{label="bun"}
```bash
bun add astro
```
:::

:::tab{label="pnpm"}
```bash
pnpm add astro
```
:::

:::tab{label="yarn"}
```bash
yarn add astro
```
:::

::::

FileTree

astro.config.mjs
package.json
README.md
src
- components
  - Header.astro
  - Footer.astro
- layouts
  - Layout.astro
- pages
  - index.astro
  - about.astro
  - posts
    […slug].astro
- styles
  - global.css
public
- favicon.svg
- …
tsconfig.json

:::filetree
- astro.config.mjs
- package.json
- **README.md**
- src
  - components
    - **Header.astro**
    - Footer.astro
  - layouts
    - Layout.astro
  - pages
    - index.astro
    - about.astro
    - posts
      - [...slug].astro
  - styles
    - global.css
- public
  - favicon.svg
  - …
- tsconfig.json
:::

Mermaid

博客集成了 mermaid，可以方便地创建各种流程图。

graph TD
    A[开始] --> B{是否安装?}
    B -->|是| C[运行项目]
    B -->|否| D[安装依赖]
    D --> C
    C --> E[部署上线]
    E --> F[完成]

```mermaid
graph TD
    A[开始] --> B{是否安装?}
    B -->|是| C[运行项目]
    B -->|否| D[安装依赖]
    D --> C
    C --> E[部署上线]
    E --> F[完成]
```

Infographic

博客集成了 antv/infographic，可以方便地创建信息图表。

infographic list-row-simple-horizontal-arrow
data
  title 项目开发流程
  desc 从需求到上线的完整流程
  lists
    - label 需求分析
      desc 收集与整理需求
    - label 方案设计
      desc 架构与技术选型
    - label 编码开发
      desc 功能实现与调试
    - label 测试验收
      desc 质量保障与验证
    - label 部署上线
      desc 发布与监控

```infographic
infographic list-row-simple-horizontal-arrow
data
  title 项目开发流程
  desc 从需求到上线的完整流程
  lists
    - label 需求分析
      desc 收集与整理需求
    - label 方案设计
      desc 架构与技术选型
    - label 编码开发
      desc 功能实现与调试
    - label 测试验收
      desc 质量保障与验证
    - label 部署上线
      desc 发布与监控
```

Github卡片

:::github{repo="game1024/OpenSpeedy"}
:::

AIChat

User

你好，请帮我写一段hello world程序

当然，下面是 c 实现：

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

User

我想要一张搜索引擎架构图

你好，已经帮你生成完毕，以下是一张搜索引擎架构图：

  ::::chat

    :::user
    你好，请帮我写一段hello world程序
    :::

    :::ai
    当然，下面是 c 实现：

    ```c title="main.c"
    #include <stdio.h>

    int main() {
        printf("Hello, World!\n");
        return 0;
    }
    ```
    :::

    :::user
    我想要一张搜索引擎架构图
    :::

    :::ai
    你好，已经帮你生成完毕，以下是一张搜索引擎架构图：
    <Image src={搜索引擎架构} alt="搜索引擎架构" width="800"/>
    :::
::::

AIChat 组件还支持上下文功能，可以在对话中添加图片等上下文信息，AI 可以根据上下文信息生成更符合需求的回答。

User

转化成黑板粉笔风格的手绘图

Gemini

好的，已经转化完毕，以下是黑板粉笔风格的手绘图：

import ChatContext from '@/components/markdown/ChatContext.astro'

::::chat{model="gemini"}
    :::user
    <ChatContext>
      <Image src={TransformerArch} alt="Transformer" width="1000"/>
    </ChatContext>
    转化成黑板粉笔风格的手绘图
    :::

    :::ai
    好的，已经转化完毕，以下是黑板粉笔风格的手绘图：
    <Image src={Transformer} alt="Transformer" width="1000"/>
    :::
::::

CodePen

下面是一个 CodePen 嵌入示例

::codepen{user="game1024" slug="QwKyNMz" tab="result" height="300"}

近期文章

openclaw-编写符合规范的SKILL

openclaw-创建Windows系统专属的AI助手

这是我用AI轻松制作的手绘菜谱

免费可靠的字体托管方案

ImageMagick开源图片处理神器

mermaid文本绘图

正式开源! Penio

infographic信息图