Table of Contents

• Text Formatting
• Custom Components
  • Buttons
  • Admonitions
  • Code Blocks
  • Video with caption
  • Video with full-width page bleed
  • Image with caption
  • Image gallery lightbox
  • Image with full-width page bleed

Text Formatting

H1

H2

H3

Paragraphs will have text that show importance, emphasis, or both. It will showcase text that is redacted or highlighted with a tooltip...* and may even be sparkly!

• Unordered list item 1

• Unordered list item 2

  • Nested unordered list item 2.1
  • Nested unordered list item 2.2

1. Ordered list item 1
2. Ordered list item 2
   1. Nested ordered list item 2.1
   2. Nested ordered list item 2.2

Text Link
Text Link with Title (hover link to see title)

Markdown blockquotes > cannot be fully semantic with use of an author or citation and will be rendered like so:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Custom blockquotes <Quote> can be semantically rendered with an author and a citation:

It’s the possibility of having a dream come true that makes life interesting.

Footnotes are rendered with a superscript number and a reference definition that appears at the bottom of the page. For instance, I can reference React¹ or Next.js² and reference any footnote like React¹ multiple times.

Custom Components

Buttons:

Disabled Button

Default Internal Link Button

Inverted External Link Button

Button Variants:

Success Button

Call to Action Button

Danger Button

Admonitions:

NOTE

This is a general note <Admonition> with type="note" that provides additional context or information about the current topic.

WARNING

Remember to handle errors in async/await functions using try/catch blocks to prevent unhandled promise rejections.

TIP

Use semantic HTML elements like <section> and <nav> to improve accessibility and SEO.

INFO

MDX files .mdx allows you to use React components directly in your markdown content, making it perfect for interactive documentation.

DANGER

Never commit .env API keys, passwords, or other sensitive information to your repository. Use environment variables instead.

Code Blocks:

<!-- HTML code with syntax highlighting -->
<div class="container">
	<h1>Welcome</h1>
	<p>This is a sample HTML structure.</p>
</div>

/* A simple CSS declaration block */
.wrapper {
	background-color: #f0f0f0;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

// A simple JavaScript function
function greet(name) {
	return `Hello, ${name}!`;
}

console.log(greet('World'));

Video with caption:

Video with full-width page bleed:

Image with caption:

Image gallery lightbox:

Image with full-width page bleed:

Footnotes

1. React is a JavaScript library for building user interfaces, developed by Meta (formerly Facebook). ↩ ↩²

2. Next.js is a React framework that provides features like server-side rendering and static site generation. ↩

Newsletter

Subscribe to my newsletter to get the latest updates on new writings and projects.

First name

Email

Subscribe

Back

Head back to writing and explore more posts.