Unified Markdown Content System Demo

This page demonstrates all the features available in our unified Markdown content system for creating art, code, and blog content.

Basic Text Formatting

Markdown supports all the basic text formatting options you need:

Bold text for emphasis
Italic text for subtle emphasis
~~Strikethrough~~ for indicating removals
Text with a link to somewhere

Headers and Structure

Headers are used to structure your content in a hierarchical manner:

Level 3 Header

Level 4 Header

Level 5 Header

Lists

Unordered Lists

Item one
Item two
- Nested item
- Another nested item
Item three

Ordered Lists

First step
Second step
1. Sub-step one
2. Sub-step two
Final step

Task Lists

Completed task
Pending task
Future task

Blockquotes

Use blockquotes to highlight important information:

This is a blockquote. It can contain multiple paragraphs if you add a > character at the start of each line.

Like this.

Code Examples

Inline Code

Use backticks to create inline code: const variable = "value";

Code Blocks

// This is a code block with syntax highlighting
function calculateArea(width, height) {
  return width * height;
}

const area = calculateArea(5, 10);
console.log(`The area is ${area} square units`);

/* CSS example */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

Tables

Feature	Supported	Notes
Bold	✅	Use double asterisks
Italic	✅	Use single asterisks
Tables	✅	As demonstrated here
Code Blocks	✅	With syntax highlighting
Images	✅	With captions and sizing
Videos	✅	Embedded from various sources

Images

Images can be included with optional captions:

Example Image Caption: This is a sample image with a caption

Multiple images can be displayed in a gallery format:

Orange placeholder — Orange artwork example

Green placeholder — Green conceptual work

Video Embeds

Videos can be embedded from various sources:

Interactive Elements

Collapsible sections can help organize lengthy content:

Click to expand technical details

This content is hidden by default and appears when the reader clicks on the summary.

It can contain any markdown elements:

Lists
Bold text
code snippets

Math Equations

You can include mathematical equations using LaTeX syntax:

Inline equation: $E = mc^2$

Block equation:

\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x)

Project-Specific Sections

For Art Projects

Art projects may include additional sections:

Medium and Dimensions

Medium: Oil on canvas
Dimensions: 24” × 36”
Year: 2023

Artistic Statement

This piece explores the intersection of technology and traditional art forms, questioning the boundaries between digital and physical creation processes.

For Code Projects

Code projects may include:

Tech Stack

Languages: JavaScript, HTML, CSS
Frameworks: React, Node.js
Tools: Webpack, Git

Implementation Details

The core algorithm uses a recursive approach to traverse the data structure:

interface Node {
  value: string;
  children: Node[];
}

function traverse(node: Node, depth = 0): void {
  console.log(`${' '.repeat(depth * 2)}${node.value}`);
  
  for (const child of node.children) {
    traverse(child, depth + 1);
  }
}

Conclusion

This demo showcases the flexibility and power of our unified Markdown content system, allowing you to create rich, engaging content for various types of projects while maintaining a consistent authoring experience.