MarkdownRenderer Feature Test

A comprehensive test of the MarkdownRenderer capabilities, including images, videos, math, code, diagrams, and more.

Published
#Markdown#Renderer#Testing#KaTeX#Mermaid#Code

MarkdownRenderer Feature Test

This blog post is designed to test the full feature set of your MarkdownRenderer with styling aligned to harryfoster.tech — dark background, blue highlights, and clean typography.

🖼️ Image Test

Sample Unsplash Image

This is a responsive test image from Unsplash.

🎥 Video Test

🧮 Math Test (KaTeX)

Inline math example: E=mc2E = mc^2

Display math example:

∫0∞e−x2 dx=π2\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}

💻 Code Block Test

// Syntax highlighting test using atom-one-dark
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
greet('Harry');

🔤 Standard Markdown Elements

Headings

This is a Level 4 heading

This is a Level 5 heading

Lists

  • Unordered item 1
  • Unordered item 2
    • Nested item
  1. Ordered item 1
  2. Ordered item 2

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

Link

Visit harryfoster.tech

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

Nested Blockquote

This is a quote inside a quote.

Emphasis

Bold text
Italic text
Strikethrough
Bold and italic

Tables

FeatureSupportedNotes
Images✅Responsive on all screens
Videos✅Autoplay and loop tested
KaTeX Math✅Both inline and block modes
Mermaid✅Flowcharts supported
Syntax Highlight✅Theme: atom-one-dark

Inline Code and Code Span

Use inline code like console.log("hello") for short snippets.

HTML in Markdown

This is a custom HTML block inside markdown.

Images with Alt Text and Dimensions

Alt text

Link with Title Attribute

OpenAI's website

Escaped Characters

Use \* to render a literal asterisk: *

Footnotes1

Task List

  • Render basic elements
  • Render diagrams and math
  • Add collapsible sections (optional)
  • Include code and styling tests

✅ Extended Summary

This extended section confirms rendering of:

  • ✅ Nested lists and blockquotes
  • ✅ Inline code and escaped characters
  • ✅ Task lists and emojis
  • ✅ Footnotes and tables
  • ✅ Custom inline HTML

🧩 Collapsible Details Test

Click to Expand: What is Markdown?

Markdown is a lightweight markup language used to format plain text. It’s widely used for writing documentation, blog posts, and README files.

Click to Expand: What is Mermaid?

Mermaid allows you to generate diagrams and flowcharts using text and code. It’s especially useful in technical documentation.

🚨 Callout Component Test (Improved Styling)

ℹ️ Info: This is an informational callout used to convey neutral messages or extra context.
⚠️ Warning: Be cautious when using experimental or unstable features.
✅ Success: All renderer components passed their rendering tests successfully.
❌ Error: Something didn’t work correctly. Check the console or devtools for more details.
💡 Tip: You can abstract these into reusable React components like.

Footnotes

  1. This is a footnote used to test footnote rendering. ↩

Comments

Loading comments...

Enjoyed This Post?

If this article sparked your curiosity, subscribe and get the newest deep dives straight to your inbox.

Never Miss a Post

Subscribe to get the latest deep dives directly to your inbox.

MarkdownRenderer Feature Test | Harry Foster