Markdown Test

10 Jun, 2026

Markdown Style Test Page for DrkPxl Dark Theme

This page demonstrates all supported BearBlog markdown features to test how they look with your dark theme. Feel free to copy this entire content and create a test post!

Text Formatting

Let's test various text formatting options:

This is bold text and this is italic text and this is bold italic text.

You can also use ~~strikethrough~~ for deleted text and highlighted text for emphasis.

Here's a paragraph with multiple formatting: The quick brown fox ~~jumps~~ leaps over the lazy dog. This sentence combines all the formatting options together!

Headers Hierarchy

H1: Main Page Title

H2: Major Section

H3: Subsection

H4: Sub-subsection

H5: Minor Heading

H6: Smallest Heading

Back to normal paragraph text after headers. Notice how the different header levels create visual hierarchy.

Links & References

Here are various link styles:

Reference-style links: Check out BearBlog for minimal blogging, or see the documentation.

Lists

Unordered Lists

First item with a really long text that wraps to show how multi-line list items look in the dark theme
Second item
- Nested item 2.1
- Nested item 2.2
  - Deep nested item 2.2.1
  - Deep nested item 2.2.2
Third item

Ordered Lists

First step in the process
Second step with substeps:
1. Substep 2.1
2. Substep 2.2
3. Substep 2.3
Third and final step

Mixed Lists

First ordered item
- Unordered sub-item
- Another unordered sub-item
Second ordered item
- Different bullet style
- Works the same way
Third ordered item

Task Lists (if supported)

Incomplete task
Completed task
Another todo item

Blockquotes

This is a single-line blockquote. It should stand out from regular text.

This is a multi-line blockquote. It can span multiple lines and paragraphs.

It can even have multiple paragraphs within the same quote block!

Note: Blockquotes can contain formatted text and even code.

Nested Blockquotes

Level 1 blockquote

Level 2 nested blockquote

Level 3 deeply nested blockquote

Code Blocks

Inline Code

Here's some inline code within a sentence. You can use it for variable_names, function() calls, or file-paths.txt.

Code Block Without Language

This is a generic code block
without syntax highlighting
but still formatted as code

JavaScript Code

// JavaScript example with syntax highlighting
function generateProject(name, description) {
    const project = {
        id: Math.random().toString(36).substr(2, 9),
        name: name,
        description: description,
        createdAt: new Date().toISOString(),
        tags: ['web', 'javascript']
    };
    
    console.log(`Created project: ${project.name}`);
    return project;
}

// Call the function
const myProject = generateProject('DrkPxl Labs', 'A minimalist tech blog');

Python Code

# Python example
import random
import json
from datetime import datetime

class Project:
    def __init__(self, name, description):
        self.name = name
        self.description = description
        self.created_at = datetime.now()
        self.tags = []
    
    def add_tag(self, tag):
        """Add a tag to the project"""
        if tag not in self.tags:
            self.tags.append(tag)
    
    def to_json(self):
        return json.dumps({
            'name': self.name,
            'description': self.description,
            'created_at': str(self.created_at),
            'tags': self.tags
        }, indent=2)

# Create a new project
project = Project('AI Assistant', 'A helpful coding companion')
project.add_tag('python')
project.add_tag('ai')
print(project.to_json())

CSS Code

/* Custom dark theme styles */
:root {
    --primary-color: #60a5fa;
    --background: #000000;
    --text-color: #e5e7eb;
}

.project-card {
    background: var(--background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(96, 165, 250, 0.3);
}

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DrkPxl Labs</title>
</head>
<body>
    <div class="project-card">
        <h3>Project Title</h3>
        <p>Project description goes here.</p>
        <div class="tags">
            <span class="tag">web</span>
            <span class="tag">design</span>
        </div>
    </div>
</body>
</html>

Tables

Simple Table

Project	Technology	Status
Blog Migration	BearBlog	In Progress
Home Assistant Card	JavaScript	Complete
Air Quality Monitor	React	Active

Aligned Table

Left Aligned	Center Aligned	Right Aligned
Left text	Center text	Right text
$100	⭐⭐⭐⭐⭐	100%
Lorem ipsum	dolor sit	amet

Complex Table

Feature	Free Tier	Pro Tier	Enterprise
Storage	1 GB	100 GB	Unlimited
Bandwidth	10 GB/mo	1 TB/mo	Unlimited
Custom Domain	❌	✅	✅
SSL Certificate	✅	✅	✅
Analytics	Basic	Advanced	Custom
Support	Community	Email	24/7 Phone
Price	$0	$9/mo	Custom

Images

Here's how images appear (using a placeholder image):

You can also use images inline with text: like this checkmark.

Horizontal Rules

Three different ways to create horizontal rules:

Using three hyphens:

Using three asterisks:

Using three underscores:

Footnotes

Here's a sentence with a footnote¹ and here's another one².

You can also use named footnotes³ for better organization.

Special Characters & Typography

BearBlog automatically converts certain character combinations:

Copyright: © becomes ©
Registered: ® becomes ®
Trademark: ™ becomes ™
Plus/minus: ± becomes ±
Ellipsis: ... becomes …
Em dash: -- becomes —
Arrows: -> becomes →, <- becomes ←

Fractions: 1/2, 1/4, 3/4

Superscript: x² + y² = z²

Subscript: H₂O is water

Line Breaks

Single line break (won't show). Still the same paragraph.

Double line break.

Creates a new paragraph.

Use backslash
to force a line break
within the same paragraph.

Or use two spaces at the end of a line
to create a line break
like this.

Mathematical Notation (LaTeX)

Inline math: $E = m c^{2}$ is Einstein's famous equation.

Block math:

\frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

More complex equation:

\int_{- \infty}^{\infty} e^{- x^{2}} d x = \sqrt{π}

HTML in Markdown

You can mix HTML with markdown:

This is a custom HTML block with gradient background!

Click to expand this section

This is hidden content that can be revealed by clicking the summary. It's great for:

FAQ sections
Spoiler content
Additional details
Long code examples

Embedded Content

YouTube Videos (using HTML)

Tweets (using HTML)

Example tweet embed

Edge Cases & Escaping

To display special characters literally, escape them with backslash:

*not italic*
*not bold*
[not a link]
`not code`
# not a header

Displaying backticks in code: `backticks`

Displaying triple backticks: ```

Conclusion

This comprehensive test page covers all major markdown features supported by BearBlog. Your dark theme should handle all these elements gracefully. If any element doesn't look right, you can adjust the CSS accordingly.

Pro tip: Save this as a draft post titled "Style Guide" so you can always reference how different markdown elements look on your blog!

Last updated: Testing the dark theme for DrkPxl Labs on BearBlog

This is the first footnote at the bottom of the page.↩
This footnote has multiple lines.

You can even add paragraphs in footnotes!↩
Named footnotes are easier to manage in longer documents.↩

#testing