Add GitHub-style callout support
Implement proper GitHub-style callouts with beautiful styling: Features: - Custom rehype plugin to transform > [!NOTE] syntax - Support for 5 callout types: * NOTE (blue, 📝) * TIP (green, 💡) * IMPORTANT (purple, ❗) * WARNING (orange, ⚠️) * CAUTION (red, 🚨) - Gradient backgrounds with accent colors - Full dark mode support - Converts existing emoji callouts to proper format Files: - lib/rehype-callouts.ts: Custom plugin for parsing - contentlayer.config.ts: Add plugin to pipeline - styles/globals.css: Beautiful styling for all types - content/: Convert 2 emoji callouts to [!TIP] format 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import rehypeSlug from 'rehype-slug';
|
||||
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import rehypePrettyCode from 'rehype-pretty-code';
|
||||
import { rehypeCallouts } from './lib/rehype-callouts';
|
||||
|
||||
export const Post = defineDocumentType(() => ({
|
||||
name: 'Post',
|
||||
@@ -97,6 +98,7 @@ export default makeSource({
|
||||
keepBackground: false,
|
||||
},
|
||||
],
|
||||
rehypeCallouts,
|
||||
rehypeSlug,
|
||||
[rehypeAutolinkHeadings, { behavior: 'wrap' }],
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user