wiki/content/blog/markdown-with-code-examples.md

title, description, date, slug, published, tags, readTime

title	description	date	slug	published	tags	readTime
Writing Markdown with Code Examples	A sample post showing how to write markdown with syntax-highlighted code blocks, tables, and more.	2025-01-17	markdown-with-code-examples	true	markdown tutorial code	5 min read

Writing Markdown with Code Examples

This post demonstrates how to write markdown content with code blocks, tables, and formatting. Use it as a reference when creating your own posts.

Frontmatter

Every post starts with frontmatter between --- delimiters:

---
title: "Your Post Title"
description: "A brief description for SEO"
date: "2025-01-17"
slug: "your-url-slug"
published: true
tags: ["tag1", "tag2"]
readTime: "5 min read"
---

Code Blocks

TypeScript

import { query } from "./_generated/server";
import { v } from "convex/values";

export const getPosts = query({
  args: {},
  returns: v.array(
    v.object({
      _id: v.id("posts"),
      title: v.string(),
      slug: v.string(),
    }),
  ),
  handler: async (ctx) => {
    return await ctx.db.query("posts").collect();
  },
});

React Component

import { useQuery } from "convex/react";
import { api } from "../convex/_generated/api";

export function PostList() {
  const posts = useQuery(api.posts.getPosts);

  if (posts === undefined) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {posts.map((post) => (
        <li key={post._id}>
          <a href={`/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

Bash Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Sync posts to Convex
npm run sync

# Deploy to production
npm run deploy

JSON

{
  "name": "markdown-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "sync": "npx ts-node scripts/sync-posts.ts"
  }
}

Inline Code

Use backticks for inline code like npm install or useQuery.

Reference files with inline code: convex/schema.ts, src/pages/Home.tsx.

Tables

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run sync	Sync markdown to Convex
npx convex dev	Start Convex dev server

Lists

Unordered

• Write posts in markdown
• Store in Convex database
• Deploy to Netlify
• Updates sync in real-time

Ordered

1. Fork the repository
2. Set up Convex backend
3. Configure Netlify
4. Start writing

Blockquotes

Markdown files in your repo are simpler than a CMS. Version controlled, AI-editable, and no separate admin panel.

Links

External links open in new tabs: Convex Docs

Internal links: Setup Guide

Emphasis

Use bold for strong emphasis and italics for lighter emphasis.

Horizontal Rule

---

Images

Place images in public/ and reference them:

![Alt text](/image.png)

File Structure Reference

content/blog/
├── about-this-blog.md
├── markdown-with-code-examples.md
├── setup-guide.md
└── your-new-post.md

Tips

1. Keep slugs URL-friendly (lowercase, hyphens)
2. Set published: false for drafts
3. Run npm run sync after adding posts
4. Use descriptive titles for SEO