DeDeLab

February 25, 2026

 • 1 min read

0

DeDeLab Blog Formatting Tutorial: Markdown and MDX Style Guide

A practical guide that shows how to write blog posts in this project, with copy-ready examples for markdown, code blocks, images, Alert, and SpecialLink.

This article is a live format playground. You can copy any snippet below and use it directly in your own post.

1) Minimum frontmatter you should always provide

Use this as your default template:

---
title: "Your Post Title"
description: "One sentence summary for card preview and SEO."
date: "2026-02-25"
category: "Blog"
tags: ["Tag1", "Tag2"]
featuredImage: "./cover.png"
pinned: false
---

Why these fields matter

• title and description are used in post cards and SEO.
• date controls sort order.
• category is used for list grouping.
• tags powers Topics pages.
• featuredImage is used for list thumbnail and top cover.
• pinned controls the pinned stories panel.

2) Core markdown blocks

Paragraph and inline code

Use inline code like npm run develop for commands and config keys.

Quote

Keep your writing practical, testable, and easy to copy.

List

• Keep one point per bullet.
• Prefer short lines for scanning.
• Use examples whenever possible.

Divider

Add a divider between major sections:

---

3) Code blocks

This project supports Prism highlighting and line numbers.

export function createPostMeta() {
  return {
    category: "Blog",
    pinned: false,
  };
}

def normalize_tags(tags):
  return [tag.strip() for tag in tags if tag]

npm run develop
npm run build

4) Image and caption

Local image example:

Remote image example also works:

5) Highlight and links

Use

mark

Regular markdown link: Open the Gatsby docs

Raw HTML anchor also works:

6) MDX custom component: Alert

Use this for warnings, tips, and important notes.

Copy-ready snippet

<Alert severity="info">
  Put your message here.
</Alert>

7) MDX custom component: SpecialLink

Use this when you want a rich link card (video/demo/repo).

Copy-ready snippet

<SpecialLink
  href={"https://example.com"}
  title={"Card title"}
  description={"Card summary"}
  site={"example.com"}
  image={"https://example.com/cover.png"}
/>

8) Optional advanced layout with Box and Typography

You can also use MUI wrappers that are mapped in this project:

<Box sx={{ border: "1px solid", borderColor: "divider", borderRadius: "8px", p: 2, my: 2 }}>
  <Typography sx={{ fontWeight: 700 }}>
    Custom callout with Box + Typography
  </Typography>
  <Typography sx={{ color: "text.secondary" }}>
    Useful for custom layout blocks without creating a new React component.
  </Typography>
</Box>

9) Quick publishing checklist

1. Put your file in content/posts/<slug>/index.mdx.
2. Fill frontmatter fields first.
3. Verify featuredImage path exists.
4. Run npm run develop for preview.
5. Run npm run build before pushing.

If you follow this tutorial format, your post should render correctly in list pages, post detail pages, Topics, and pinned areas.