Draft

Exploring Custom MDX Components

Headings

Explore various heading styles to structure your content effectively.

Code:

md
# This is a h1 Heading

## This is a h2 Heading

### This is a h3 Heading

#### This is a h4 Heading

#### This is a h5 Heading

Output:

This is a h1 Heading,

This is a h2 Heading,

This is a h3 Heading,

This is a h4 Heading,

This is a h5 Heading,

Texts

Add emphasis and style to your text using bold, italic, and strikethrough.

Code:

md
This is a paragraph.

**This is a bold sentence.**

_This is an italic sentence._

~~This is a strikethrough sentence.~~

This is a <sparklyText>sparklyText</sparklyText> element.

Output:

This is a paragraph.

This is a bold sentence.

This is an italic sentence.

This is a strikethrough sentence.

This is a sparklyText element.

Links

Enhance your links with custom styling.

Code:

md
[I am a link](https://example.com). I will open in a new tab.

I am an <internalLink href="https://example.com">internal link</internalLink>. I will open in the same tab.

Output:

I am a link. I will open in a new tab.

I am an internal link. I will open in the same tab.

Media

Explore different media elements.

Image:

Code:

md
![alt text](https://res.cloudinary.com/denkuysrh/image/upload/v1699795335/Cover%20Images/Articles/My_custom_components_1_xw0i15.png)

<figcaption>The image caption</figcaption>

Output:

Youtube Video:

Code:

md
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/7CqJlxBYj-M"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

<figcaption>The video caption</figcaption>

Output:

Lists

Organize content with ordered, unordered, and nested lists.

Code:

md
### Ordered list:

1. Item 1
2. Item 2
3. Item 3

### Unordered list:

- Item 1
- Item 2
- Item 3

### Nested list:

1. Item 1
   - Item 1
   - Item 2
2. Item 2
   1. Item 1
   2. Item 2

- Item 1
  - Item 1
  - Item 2
- Item 2
  1.  Item 1
  2.  Item 2

Output:

Ordered list:

1. Item 1
2. Item 2
3. Item 3

Unordered list:

• Item 1
• Item 2
• Item 3

Nested list:

1. Item 1
   • Item 1
   • Item 2
2. Item 2
   1. Item 1
   2. Item 2

• Item 1
  • Item 1
  • Item 2
• Item 2
  1. Item 1
  2. Item 2

Tables

Present data in an organized manner using tables.

Code:

mdx
| Name  | Age |
| ----- | --- |
| John  | 20  |
| Peter | 30  |

Output:

Blockquotes

Highlight quotes with custom blockquote styling.

Code:

md
> I am a blockquote

Output:

I am a blockquote

Horizontal Rule

Separate content with a horizontal rule.

Code:

md
---

This is a horizontal rule

Output:

This is a horizontal rule

Summary and Details

Create interactive content with summary and details.

Code:

md
<details>
  <summary>Click me</summary>
  <p>Here is the details</p>
  <p>
    I am an <faqCode>inline code</faqCode>
  </p>
  <faqCodeBlock>
   {`
    I am a code block:
    :root {
    --variable-name: value;
    }
    `}
  </faqCodeBlock>
</details>

Output:

    I am a code block:
    :root {
    --variable-name: value;
    }
    

Code Playgrounds

Include code snippets and playgrounds for interactive coding experiences.

Inline Code:

Code:

md
Here is an `inline code`.

Output:

Here is an inline code.

Code Blocks:

html
<div>
  <h1>Hello World!</h1>
  <!-- this is a comment  -->
</div>

css
/* accordion card */
.accordion2-card {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}

jsx
import React from "react";

export default function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

CodePen:

Code:

js
<iframe
  height="400"
  style={{ width: "100%", minHeight: "400px", height: "400px" }}
  scrolling="no"
  title="Pure HTML Accordion with CSS: Example 1 [T's Notes]"
  src="https://codepen.io/timonwa/embed/QWaWEoY?default-tab=html%2Cresult&editable=true&theme-id=dark"
  frameBorder="no"
  loading="lazy"
  allowTransparency="true"
  allowFullscreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/timonwa/pen/QWaWEoY">
    Pure HTML Accordion with CSS: Example 1 [T's Notes]
  </a>{" "}
  by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>

Output:

Sandbox:

Code:

md
<codePlayground
template="react"
files={{
    "/App.js": `
import React from 'react';
import './index.css';
\n\
export default function App() {
\n\
  const [count, setCount] = React.useState(0);
  console.warn("I am a warning!");
\n\
  return (
    <div>
    <h1>Hello World!</h1>
    {/* this is a comment */}
     <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
    </div>
  );
}
    `,
    "/index.css": `
h1 {
  color: tomato;
}
`,
  }}
/>

Output:

import React from 'react';
import './index.css';

export default function App() {

  const [count, setCount] = React.useState(0);
  console.warn("I am a warning!");

  return (
    <div>
    <h1>Hello World!</h1>
    {/* this is a comment */}
     <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
    </div>
  );
}

Info Cards

Display information in styled cards.

code:

md
<infoCard title="Critical info/warnings" color="red">
  Use red color along with an exclamation mark icon (❗❗) to emphasize critical information or warnings.
</infoCard>

<infoCard title="Less critical info/warnings" color="yellow">
  Apply yellow color and pair it with a warning icon (⚠️) to highlight less critical warnings or a light bulb icon (💡) to bring attention to insightful ideas and suggestions.
</infoCard>

<infoCard title="Positive or successful outcomes" color="green">
  Utilize green color in conjunction with a checkmark icon (✅) to highlight positive or successful outcomes, achievements, or recommended practices.
</infoCard>

<infoCard title="Tips, hints, ideas" color="blue">
  Opt for blue color and complement it with an information circle icon (🛈) to emphasize tips, hints, or important notes that provide additional insights or guidance.
</infoCard>

<infoCard title="Announcement, general info" color="grey">
  When you want to make information stand out without indicating a specific level of importance, use a neutral color with an exclamation mark icon (📣).
</infoCard>

Output:

Advertisement Cards

Integrate stylish advertisement cards.

Code:

md
<advertCard />
<advertCard2 />

Output:

Get Free Notion Templates to Stay Organized and Productive! Whether you need a simple setup or a powerful dashboard, we have something for everyone.

Widgets

Add interactive widgets to your content.

Connect With Me Widget:

Code:

md
<connectWithMe />

Output:

Bye Bye Widget:

Code:

md
<byeBye />

Output:

Subscribe Widget:

Code:

md
<subscribe />

Output:

Others

Explore additional custom components.

Share to Twitter Link in a Paragraph:

Code:

md
This is a paragraph with a <twitterShareLink url="https://timonwa.com/blog/candid-journey-through-2023" title="Unfiltered Moments: A Candid Journey Through 2023 written by @timonwa\_" hashtags={[`UnfilteredMoments2023`, `UnfilteredMoments`]}>share to X(Twitter)</twitterShareLink> link.

Output:

This is a paragraph with a share to X(Twitter) link.

Custom Code Snippet for Post Example:

Code:

md
<starRatings />

Output:

Enjoy the versatility of custom MDX components in creating engaging and dynamic content on your blog.

Get Free Notion Templates to Stay Organized and Productive! Whether you need a simple setup or a powerful dashboard, we have something for everyone.