Markdown Showcase: Code Blocks, Tables, Lists, and More
Last updated on

Markdown Showcase: Code Blocks, Tables, Lists, and More

Shravan Goswami , Friedrich Nietzsche , Simone de Beauvoir
Table of Contents

This post is a live markdown reference for the Academic-Portfolio blog. If you mainly want to inspect how code blocks look, jump straight to the “Code Blocks” section below.

Headings and Inline Formatting

Markdown handles bold text, italic text, combined emphasis, strikethrough, and inline code like npm run build.

Standard inline links work, like Astro, and reference-style links also work well in longer writing, like the Astro docs. Bare URLs such as https://docs.astro.build are also rendered as links in this setup.

Quote Blocks

Markdown works best when the source stays readable and the rendered page stays pleasant to scan.

That makes it especially useful for technical notes, academic writing, changelogs, and tutorials.

Academic Portfolio markdown showcase

Callout Blocks

These callouts use lightweight HTML inside markdown, which works nicely when you want richer editorial UI than plain markdown provides.

Note: Use this for neutral side context, assumptions, or editorial notes that should not interrupt the main flow too much.

Info: Great for factual context, references, or quick implementation details that help readers orient themselves.

Tip: Ideal for shortcuts, best practices, and little quality-of-life suggestions that save readers time.

Success: Useful for confirmations, completed outcomes, or happy-path instructions after a task works.

Warning: Use this when something may fail, behave unexpectedly, or require extra care before readers continue.

Danger: Reserve this for destructive actions, irreversible steps, or high-risk mistakes.

Lists

Unordered and Ordered Lists

  • Draft the post content in src/content/blog.
  • Add headings so the table of contents has useful anchors.
  • Review the rendered output in the browser.
  1. Write the article frontmatter.
  2. Add sample markdown blocks.
  3. Build the site and confirm the page renders cleanly.

Nested Lists

  • Markdown can also handle nested structure.
    • This is useful for outlines.
    • It also helps when documenting steps with sub-points.
  • The goal here is simply to make the rendering easy to inspect.

Task Lists

  • Add a sample blog post
  • Include fenced code blocks
  • Include a markdown table
  • Replace the placeholder content with a real article later

Tables

FeatureExampleSupported here
Inline code`astro dev`Yes
Code fence```tsYes
Task list- [x] doneYes
Footnote[^1]Yes

Images and Horizontal Rules

The image below uses standard markdown image syntax with a local asset from the repo:

Academic portfolio placeholder image

Code Blocks

The following examples make it easy to compare different fenced code block styles in the current theme. Each block now shows a language pill on the left and a copy button floating at the top-right edge.

npm install
npm run dev
npm run build
type Publication = {
  title: string;
  year: number;
  tags: string[];
};

const recentPublications = (items: Publication[]) =>
  items.filter((item) => item.year >= 2024);
---
const highlights = ['Markdown', 'Shiki code blocks', 'Generated TOC'];
---

<ul>
  {highlights.map((item) => <li>{item}</li>)}
</ul>
- Browser defaults can be hard to scan.
+ Template-aware prose styles make the showcase easier to review.

HTML Inside Markdown

Raw HTML is also available when you need something markdown alone does not express cleanly.

Expandable note

This is useful for disclosures, FAQ sections, or optional implementation notes inside a post.

Footnotes

Footnotes are handy for citations, side comments, or quick clarifications.1

Footnotes

  1. This template is using Astro’s markdown pipeline, which in this version supports GitHub-flavored markdown features by default. ↩

Avatar