在 koi 博客里写文章——MDX 功能演示

这篇文章演示一下博客支持的各种写作格式,方便以后查阅。

标题层级

各级标题在文章中效果如上所示,一般正文用 ##### 就够了。

文字样式

普通文字,加粗文字斜体文字删除线行内代码

代码块

支持语法高亮:

interface BlogPost {
  title: string;
  pubDate: Date;
  tags?: string[];
}

function getPostsByTag(posts: BlogPost[], tag: string): BlogPost[] {
  return posts.filter(post => post.tags?.includes(tag) ?? false);
}
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

引用块

写博客最重要的一点就是:写给自己看,不要为了别人而写。

—— 某个不知道是谁的人

列表

无序列表:

  • 第一项
  • 第二项
    • 嵌套项
    • 另一个嵌套项
  • 第三项

有序列表:

  1. 第一步:想好写什么
  2. 第二步:打开编辑器
  3. 第三步:开始写(最难的一步)

表格

名称用途评价
Astro静态站点框架真的快
koi博客主题好看
Cloudflare Pages部署平台免费好用
MDX文章格式灵活

链接与图片

Astro 官网 / koi 主题仓库

分隔线


以上就是常用格式的演示,基本够用了。