This article is a dynamic style guide that demonstrates all HTML elements generated by Markdown and the @tailwindcss/typography plugin. You can use it as a reference and template when writing new articles.

Centered Text

Centered text content

Headings (Heading 2)

Headings are key to organizing content structure. Below are all heading level styles:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Styles

This is a normal paragraph to demonstrate basic font and line height. You can easily make text bold, italic, or bold italic.

You can also add ~~strikethrough~~, or insert inline code snippets, such as const variable = 'hello';.

Hyperlinks are an essential part of a blog. Here is a link to the Next.js official site.

Blockquotes

When you need to quote someone or highlight a section of text, blockquotes are very useful.

“Stay hungry, stay foolish.” — Steve Jobs

Blockquotes can also contain multiple paragraphs:

This is a multi-paragraph quote. The first paragraph is here.

This is the second paragraph. The format remains consistent, providing a clear visual separation.

Lists

Unordered List

List item one
List item two
- Nested list item A
- Nested list item B
List item three

Ordered List

First item
Second item
1. Nested item 1
2. Nested item 2
Third item

Code Blocks

Thanks to rehype-pretty-code, code blocks have beautiful syntax highlighting just like VS Code.

JavaScript Example:

import React from 'react';

const MyComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};