How do I add the Markdown block to a Hugo site?

Add a "block: markdown" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the Markdown block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the Markdown block?

Yes. It exposes 2 content options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the Markdown block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/markdown

ContentFree · MITHugo

Markdown block

Drop in long-form prose with polished typography — the escape hatch for anything the structured blocks don't cover.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.0.0Version

2Options

MITLicense

Quick start

Add the Markdown block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: markdown
  content:
    title: Why Hugo Blox?
    text: Hugo Blox ships **Preact blocks**, Tailwind 4, and fast Hugo rendering. Mix Markdown, data-driven content, and components without build grief.

Overview

About the Markdown block

Beautiful typography for your content

Transform your written content into beautifully formatted, readable sections with the Markdown block - a clean, minimalist component that puts your words front and center with professional typography and perfect readability.

✨ Key Features

Prose Optimization: Beautiful typography with the prose class for optimal readability
Dark Mode Support: Automatic dark mode styling with prose-invert
Responsive Typography: Scales from base to large (lg:prose-xl) on bigger screens
Markdown Rich: Full Markdown support including links, formatting, lists, and more
Optional Titles: Add section headers with consistent styling
Center-Aligned: Content centered with optimal line length for reading
Emoji Support: Built-in emoji rendering for expressive content

🎯 Perfect For

About Pages: Tell your story with beautifully formatted text
Blog Content: Create rich, readable blog post sections
Documentation: Present technical content with professional formatting
Company Information: Share detailed company background and mission
Policy Pages: Format terms, privacy policies, and legal content
Long-Form Content: Any substantial text content that deserves beautiful presentation

🚀 Why Choose Markdown Block?

Reading Experience: Optimized typography that makes long-form content a pleasure to read

Flexible Content: Support for all Markdown features including links, emphasis, lists, and code

Consistent Styling: Professional typography that matches your site's design system

Accessibility First: Semantic HTML structure with proper heading hierarchy and contrast

📊 Content Benefits

Improved Readability: Optimal line length and spacing reduce eye strain
Better Engagement: Beautiful typography encourages visitors to read more
SEO Friendly: Clean, semantic HTML structure helps search engines understand content
Mobile Optimized: Responsive text sizing ensures readability on all devices

💡 Typography Science

Optimal Line Length: Content width designed for comfortable reading speed
Proper Contrast: Light and dark mode support ensures accessibility
Hierarchical Structure: Clear visual hierarchy guides readers through content
Breathing Room: Generous spacing prevents information overload

🎨 Use Cases

Storytelling: Share your journey, mission, or company history
Educational Content: Present tutorials, guides, or learning materials
Announcements: Communicate important updates or changes
Content Marketing: Create engaging blog posts and articles
Documentation: Technical guides, API docs, or user manuals

Perfect for bloggers, businesses, educators, and anyone who values beautiful, readable content presentation. Make your words shine with typography that respects both your message and your readers.

Reference

Configuration

Every option the Markdown block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`title`	`string`	—	Section heading (supports Markdown)
`text`required	`string`	—	Markdown body content

Compose

Works well with

Blocks that pair naturally with Markdown on the same page.

CTA Card Features

Frequently asked

Markdown block FAQ

Add a "block: markdown" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the Markdown block?

Customize with AI View source