Welcome to the Blog Components Demo! This article demonstrates several core features of the blogging platform. See how users can combine different Markdown, Markdoc, and custom components to create engaging, interactive, and educational content. Use this as a reference for what you can achieve in your own posts.
Code blocks and Syntax Highlighting
You can embed code directly in your posts for documentation or walkthrough purposes:
import { Button } from '@kit/ui/button';
function HelloWorld() {
return <Button>Hello World</Button>;
}
🖼️ Example 2: Image Embeds
Display inline images, support captions, and combine them with text content for tutorials.
You can also render external images using the same syntax:
💬 Example 3: Blockquotes and Callouts
Highlight important information using quotes and custom blocks.
"Intuitive UIs drive adoption. Use the included components to assemble pages fast."
Custom Callout
You can draw attention to key info with custom-styled callout blocks!
📋 Example 4: Ordered and Unordered Lists
- Feature checklist
- Options for users
- Tips for getting started
- Onboard your team members
- Set roles and permissions
- Customize project templates
🎥 Example 5: Embedded Video
Show off a demo or walk-through right inside your post!
🏷️ Example 6: Data Tables
| Feature | Supported | Notes |
|---|---|---|
| Images | ✅ | Local and remote, with captions |
| Video | ✅ | Direct YouTube/Vimeo embedding |
| Custom Components | ✅ | Overview, Featured, Callout, etc. |
| Syntax Highlight | ✅ | For all major languages |
🌟 Example 7: Custom "Featured" Conclusion Block
Ready to Build?
You've seen a demonstration of all major Markdoc components: overview blocks, images, embedded video, code, callouts, and more.
Mix and match these for dynamic documentation, marketing, or knowledge base posts. Use this file as a reference for what your content can do, and try experimenting with advanced combinations.
If you're building out docs, marketing, or support content, these are the building blocks—no custom code needed!
📚 Use Cases
- Documentation: Guide users with instructions, visuals, and callouts.
- Product Demos: Embed code and videos to illustrate features.
- Marketing: Show off UI components with images and interactive blocks.
- Engineering Blogs: Mix code, data tables, and insights for technical articles.
Need more examples? See the documentation for all available components and usage patterns.