Blog Components Demo: Showcasing Markdoc Features and Use Cases

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.

Shadcn UI Button Example — Example of the Image component rendering a local image

You can also render external images using the same syntax:

External image demo — This is a remote image, seamlessly rendered

💬 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!

A sample video rendered via the Markdoc Youtube component

🏷️ 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.