simple-tips

一个简单易用的 Astro 集成，用于在 Markdown 和 MDX 文件中创建精美的提示框。

功能特性

• 🚀 零配置即用
• 🎨 4 种内置提示框类型（note, tip, warning, caution）
• 💎 完全内联样式，无需外部CSS文件
• ✨ 简单直观的语法：!!!note 内容 !!!

安装

# 使用 npm
npm install simple-tips

# 使用 yarn
yarn add simple-tips

# 使用 pnpm
pnpm add simple-tips

配置

在 astro.config.mjs 文件中添加集成：

import { defineConfig } from 'astro/config';
import simpleTips from 'simple-tips';

export default defineConfig({
  integrations: [simpleTips()],
});

高级配置

import { defineConfig } from 'astro/config';
import simpleTips from 'simple-tips';

export default defineConfig({
  integrations: [
    simpleTips({
      // 是否压缩CSS（默认：true）
      minify: true,
      
      // 自定义提示框类型
      customTypes: {
        success: {
          title: 'Success',
          borderColor: 'rgba(54, 201, 120, 1)',
          backgroundColor: 'rgba(54, 201, 120, 0.1)',
          textColor: 'rgba(54, 201, 120, 1)',
        },
      },
    }),
  ],
});

使用

在 Markdown 或 MDX 文件中使用以下语法：

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

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

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

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

内置提示框类型

• note - 蓝色提示框，用于重要信息
• tip - 绿色提示框，用于实用技巧
• warning - 红色提示框，用于警告信息
• caution - 橙色提示框，用于谨慎提示

自定义提示框类型

你可以通过配置添加自定义提示框类型，每个类型需要定义：

• title - 提示框标题
• borderColor - 边框颜色
• backgroundColor - 背景颜色
• textColor - 文字颜色

输出示例

转换后的 HTML 结构：

<div style="border-left:5px solid rgb(44, 142, 255);background-color:rgba(44, 142, 255, 0.1);color:rgb(44, 142, 255);margin-top:1rem;margin-bottom:1rem;padding:1rem;">
  <div style="font-weight:700;margin-bottom:0.5rem;text-transform:uppercase;">Note</div>
  这是一个 note 类型的提示框
</div>