Notion Block Rendering Test

This page demonstrates various Notion block types to test rendering functionality for the portfolio blog CMS.

Text Formatting

This is a paragraph with bold text, italic text, underlined text, strikethrough text, and inline code.

You can also combine formatting: bold and italic, underlined and bold.

Here’s some highlighted text and red highlighted text .

Headings

Heading 1

Heading 2

Heading 3

Lists

Bulleted List

• First item

• Second item

• Third item with nested items

  • Nested item 1

  • Nested item 2

Numbered List

1. First step

2. Second step

3. Third step with nested items

   1. Nested step 1

   2. Nested step 2

To-do List

• Completed task

• Pending task

• Another pending task

Callouts and Quotes

This is a quote block. Use it for citations or emphasized text.

Toggle Blocks

Large Toggle Heading

This toggle uses a larger heading size.

Code Blocks

JavaScript example:

function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to my blog, ${name}`;
}

greet('World');

Python example:

def calculate_sum(a, b):
    """Calculate the sum of two numbers"""
    return a + b

result = calculate_sum(10, 20)
print(f"The sum is: {result}")

Math Blocks

Inline math: The quadratic formula is x = (-b ± √(b² - 4ac)) / 2a

Divider

Content above the divider

Content below the divider

Links

Internal link to Personal Website page.

External link to Notion’s website.

Columns

Column 1

This is the first column with some content.

• Item 1

• Item 2

Column 2

This is the second column with different content.

• Item A

• Item B

Column 3

This is the third column.

• Item X

• Item Y

Tables

Mermaid Diagrams

Flowchart example:

graph TD;
    A["Start"] --> B{"Test rendering?"};
    B -- Yes --> C["Check all blocks"];
    B -- No --> D["Set up CMS"];
    C --> E["Verify output"];
    D --> E;
    E --> F["Deploy blog"];

Color Testing

Red text block

Blue text block

Green text block

Yellow background

Purple background

Nested Content

graph TD;
    A["Start"] --> B{"Test rendering?"};
    B -- Yes --> C["Check all blocks"];
    B -- No --> D["Set up CMS"];
    C --> E["Verify output"];
    D --> E;
    E --> F["Deploy blog"];

Summary