MDX Features Showcase

This post serves as a quick reference and showcase for all custom MDX components and special markdown features available in this blog.

Standard Markdown text formatting is supported:

• Bold Text: **bold text**
• Italic Text: *italic text*
• Bold & Italic: ***bold and italic***
• Inline Code: `inline code`
• Strikethrough: ~~strikethrough~~ (via remark-gfm)

Standard Markdown headings (# H1 to ###### H6) are used.

Headings from <h2> to <h6> are automatically rendered as collapsible sections, similar to Wikipedia. Clicking the heading text or the arrow icon will toggle its content visibility. The arrow rotates to indicate state.

Content within H4.

Content within H5.

• Item A
• Item B
  • Nested B.1
  • Nested B.2

1. First item
2. Second item
   1. Sub-item 2.a
   2. Sub-item 2.b

• Completed task
• Incomplete task

Standard Markdown links: [Link Text](https://example.com) renders as Link Text. [Internal Link](/blog) renders as Internal Link.

Standard Markdown images: ![Alt Text](URL_or_Path)

A small image caption, if needed, can be added with HTML.

This is a blockquote. It can span multiple lines.

And even be nested.

Code blocks are created using triple backticks, followed by an optional language identifier.

// JavaScript Example
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));

# Python Example
def add(a, b):
  return a + b
print(add(5, 3))

Automatically generates a collapsible table of contents based on the headings in the post. It's typically placed at the beginning.

(This component is already demonstrated at the top of this post.)

Uses KaTeX for rendering mathematical formulas.

• Inline Math: e = mc^2 is written as <InlineMath math="e = mc^2" /> which renders as $e = mc^2$.
• Block Math: <BlockMath math="\sum_{i=1}^N w_i x_i" /> renders as:
  $$\sum_{i=1}^N w_i x_i$$

Create flowcharts, sequence diagrams, Gantt charts, and more using Mermaid syntax within a mermaid language code block.

Flowchart Example:

Sequence Diagram Example:

(The Mermaid diagrams above are rendered live by the MermaidComponent.)

Provides a system for academic-style citations and a bibliography.

Inline Citations (<Ref />):

• Numeric (default): Claim <Ref id="dijkstra1959" />. -> Claim .
• Superscript: Another point<Ref id="cormen2009" style="superscript" />. -> Another point.
• Author-Year: As shown by <Ref id="knuth1968" style="author-year">Knuth (1968)</Ref>. -> As shown by .
• With Page Number: Details <Ref id="dijkstra1959" page="270" />. -> Details .
• Citing Websites: See docs <Ref id="mozilla2024" />. -> See docs .
• Citing Theses: As per <Ref id="johnson2018" style="superscript" />. -> As per .

Bibliography (<References />):

Place the <References /> component at the end of your post. It lists all cited works.

• Props for <References />:

  • references: (Required) An array of reference objects.
  • style: (Optional) Citation style for the bibliography: "apa" (default), "ieee", "chicago". Example: <References style="ieee" ... />.
  • title: (Optional) Title for the section (default: "References").

• Reference Object Structure (key fields):

  {
    "id": "unique-ref-id", // Matches <Ref id=... />
    "type": "article" | "book" | "website" | "conference" | "thesis" | "misc",
    "title": "Title of the Work",
    "authors": ["Author A", "Author B"],
    "year": 2023,
    // ... other fields like publication, url, doi, pages, etc.
  }
  

  (Refer to the References.tsx component for all available optional fields like volume, issue, publisher, note.)

(The <References /> block for the citations used in this section is at the very end of this post, demonstrated with APA style.)

Post-specific themes can be applied via frontmatter (e.g., theme: 'theme-research'). This can alter CSS variables for colors and accents. This post uses theme: 'theme-code'.

This concludes the MDX features showcase. Use this as a reference for writing your blog posts!