Syntax Documentation

Markdown is a lightweight, simple and easy to read markup language commonly used for formatting text on the web. It is used in many applications and websites like Discord, Reddit and more (though not every platform supports the full range of Markdown features).

Markdown is best for beginners and simple profiles and texts, which don't require complex intricate formatting.

Source

# Markdown Example

[Full markdown guide](https://www.markdownguide.org/basic-syntax/)

# Heading level 1

## Heading level 2

### Heading level 3 and so on

Alternative heading
===============

Another heading
----------------

## Formatting

**Bold text** and *italic text*

### Lists
- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2

### Links and Images
[Link example](https://example.com)
![](https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True)
![Optional caption](https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True)

> Blockquote

### Code
```python
def hello_world():
    print("Hello from Markdown!")
```

Rendered

Markdown Example

Full markdown guide

Heading level 1

Heading level 2

Heading level 3 and so on

Alternative heading

Another heading

Formatting

Bold text and italic text

Lists

Item 1
Item 2
Subitem 2.1
Subitem 2.2

Links and Images

Link example

Blockquote

Code

python def hello_world(): print("Hello from Markdown!")

BBCode is a an older markup language that was very popular in phpBB and other forum software which was very popular in the past, and it is extensively used by thousands of people to format their profiles on f-list.net, which is why it was chosen to add BBCode support to the platform.

BBCode is best for users who are used to using it and want to continue using it, but also for those who feel that markdown does not offer enough features, but HTML is too complex.

Source

[heading]Heading[/heading]
[heading level=1]Heading with level (size)[/heading]
[heading level=2]Heading with level (size)[/heading]
[heading level=3]Heading with level (size)[/heading]
[heading level=4]Heading with level (size)[/heading]
[heading level=5]Heading with level (size)[/heading]
[heading level=6]Heading with level (size)[/heading]

[b]BBCode Example[/b]

[u]Formatting Examples:[/u]

[i]Italic text[/i] and [b]bold text[/b]

[list]
[*]List item 1
[*]List item 2
  [list]
  [*]Subitem 2.1
  [*]Subitem 2.2
  [/list]
[/list]

[url=https://example.com]Link example[/url]

Various examples of using images:

(You must have a closing tag)

[img]https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True[/img]

[img=https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True]alternative text which can be used to caption your image[/img]

[img height=100 width=100 src=https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True]alternative text[/img]

[img height=100 width=100 alt=alternative text]https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True[/img]


Line

[hr]


[collapse=Example]This is a collapsible content block.

[collapse=Another Level]Can be nested as many times

[collapse=And one more]as you need[/collapse]

[/collapse]

[/collapse]

[code]
You can use code blocks to display code, and it includes BBCode itself.

BBCode formatting will be skipped inside code blocks.

Example:

[b]Bold text[/b]

[/code]

Rendered

Heading

Heading with level (size)

BBCode Example

Formatting Examples:

Italic text and bold text

List item 1
List item 2

Subitem 2.1
Subitem 2.2

Link example

Various examples of using images:

(You must have a closing tag)

alternative text which can be used to caption your image

Line

Example

This is a collapsible content block.

Another Level

Can be nested as many times

And one more

as you need


You can use code blocks to display code, and it includes BBCode itself.

BBCode formatting will be skipped inside code blocks.

Example:

[b]Bold text[/b]

HTML is the raw markup language that is used to structure and display web pages.

HTML is best for users who want to have full control over the formatting of their profiles. You can use a wide range of HTML tags and attributes including style tags, however for security reasons, some tags and attributes are not allowed, like script tags, iframe, etc.

An easy way to create a nice looking HTML formatted profile is to ask AI to generate a profile template for you. Tell it to "generate an HTML character profile template for me, it will be inserted into middle of HTML page and should not include html, head or body tags. You can use a limited set of safe HTML features, but you can also use inline styling." and then described the desired style. ChatGPT or Claude are best and free options for these tasks.

You can also use Bootstrap 5 components in your HTML, ones that don't require extra attributes except for style and class: Bootstrap 5 docs, Bootstrap 5 icons

Source

<h1>HTML Example</h1>

<h2>Formatting Examples:</h2>

<p><em>Italic text</em> and <strong>bold text</strong></p>

<ul>
    <li>List item 1</li>
    <li>List item 2
        <ul>
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
        </ul>
    </li>
</ul>

<p><a href="https://example.com">Link example</a></p>
<p><img src="https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True" alt="Image example"></p>

<pre><code>def hello_world():
    print("Hello from HTML!")
</code></pre>

<h2>Profile Building Blocks</h2>

<!-- Fantasy-style Character Card -->
<div style="border: 2px solid #8b4513; border-radius: 8px; padding: 20px; background-color: #2a1810; margin: 20px 0;">
    <h3 style="font-family: 'Cinzel', serif; color: #d4af37; text-align: center; border-bottom: 1px solid #d4af37;">Character Name</h3>
    <div style="display: flex; gap: 20px; margin: 15px 0;">
        <div style="flex: 1;">
            <p><strong style="color: #d4af37;">Race:</strong> Elven</p>
            <p><strong style="color: #d4af37;">Class:</strong> Mage</p>
            <p><strong style="color: #d4af37;">Age:</strong> 247</p>
        </div>
        <div style="flex: 1;">
            <p><strong style="color: #d4af37;">Height:</strong> 5'11"</p>
            <p><strong style="color: #d4af37;">Build:</strong> Slender</p>
            <p><strong style="color: #d4af37;">Eyes:</strong> Amber</p>
        </div>
    </div>
</div>

<!-- Sci-fi Info Panel -->
<div style="background: linear-gradient(45deg, #001a33, #003366); border-radius: 10px; padding: 20px; color: #00ffff; font-family: 'Courier New', monospace; margin: 20px 0; border: 1px solid #00ffff;">
    <h3 style="color: #00ffff; border-bottom: 2px solid #00ffff; padding-bottom: 10px;">SUBJECT PROFILE: XO-227</h3>
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
        <div>
            <p>[STATUS]: Active</p>
            <p>[CLEARANCE]: Level 3</p>
            <p>[DIVISION]: Deep Space Ops</p>
        </div>
        <div>
            <p>[SPECIES]: Augmented Human</p>
            <p>[IMPLANTS]: Neural Link v4.2</p>
            <p>[ASSIGNMENT]: Scout Ship "Horizon"</p>
        </div>
    </div>
</div>

<!-- Stat Bars -->
<div style="margin: 20px 0;">
    <h4>Character Stats</h4>
    <div style="margin: 10px 0;">
        <div style="display: flex; align-items: center; margin: 5px 0;">
            <span style="width: 100px;">Strength</span>
            <div style="flex: 1; background: #333; height: 20px; border-radius: 10px; overflow: hidden;">
                <div style="width: 75%; background: linear-gradient(90deg, #ff4d4d, #ff8080); height: 100%;"></div>
            </div>
        </div>
        <div style="display: flex; align-items: center; margin: 5px 0;">
            <span style="width: 100px;">Intelligence</span>
            <div style="flex: 1; background: #333; height: 20px; border-radius: 10px; overflow: hidden;">
                <div style="width: 90%; background: linear-gradient(90deg, #4d4dff, #8080ff); height: 100%;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Quote/Description Box -->
<div style="background: rgba(0, 0, 0, 0.3); border-left: 4px solid #d4af37; padding: 20px; margin: 20px 0; font-style: italic;">
    <p>"The stars whisper secrets to those who know how to listen..."</p>
    <p style="text-align: right; margin-top: 10px; color: #d4af37;">— Character's Memorable Quote</p>
</div>

<!-- Image Gallery -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0;">
    <div style="border: 1px solid #444; padding: 5px; border-radius: 5px;">
        <img src="https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True" style="width: 100%; height: auto; border-radius: 3px;" alt="Gallery Image 1">
    </div>
    <div style="border: 1px solid #444; padding: 5px; border-radius: 5px;">
        <img src="https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True" style="width: 100%; height: auto; border-radius: 3px;" alt="Gallery Image 2">
    </div>
    <div style="border: 1px solid #444; padding: 5px; border-radius: 5px;">
        <img src="https://arpdb.undertow.club/images/serve/ZkjtB9YghybD/?thumbnail=True" style="width: 100%; height: auto; border-radius: 3px;" alt="Gallery Image 3">
    </div>
</div>

<!-- Relationship Chart -->
<div style="margin: 20px 0; padding: 20px; background: rgba(0, 0, 0, 0.2); border-radius: 10px;">
    <h4 style="text-align: center; margin-bottom: 15px;">Relationships & Connections</h4>
    <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px;">
        <div style="text-align: center; padding: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; min-width: 150px;">
            <div style="font-weight: bold; color: #d4af37;">Allies</div>
            <ul style="list-style: none; padding: 0;">
                <li>Character 1</li>
                <li>Character 2</li>
            </ul>
        </div>
        <div style="text-align: center; padding: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; min-width: 150px;">
            <div style="font-weight: bold; color: #ff4d4d;">Rivals</div>
            <ul style="list-style: none; padding: 0;">
                <li>Character 3</li>
                <li>Character 4</li>
            </ul>
        </div>
    </div>
</div>

<!-- Timeline -->
<div style="margin: 20px 0;">
    <h4>Character Timeline</h4>
    <div style="border-left: 2px solid #d4af37; padding-left: 20px; margin-left: 10px;">
        <div style="margin-bottom: 20px; position: relative;">
            <div style="position: absolute; left: -27px; top: 0; width: 12px; height: 12px; background: #d4af37; border-radius: 50%;"></div>
            <div style="color: #d4af37;">Year 2157</div>
            <div>First interstellar mission</div>
        </div>
        <div style="margin-bottom: 20px; position: relative;">
            <div style="position: absolute; left: -27px; top: 0; width: 12px; height: 12px; background: #d4af37; border-radius: 50%;"></div>
            <div style="color: #d4af37;">Year 2160</div>
            <div>Promoted to Squadron Leader</div>
        </div>
    </div>
</div>

<!-- Equipment/Inventory Grid -->
<div style="margin: 20px 0;">
    <h4>Equipment</h4>
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;">
        <div style="background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 5px; border: 1px solid #444;">
            <div style="font-weight: bold; color: #d4af37;">Primary Weapon</div>
            <div style="font-size: 0.9em;">Plasma Rifle Mk IV</div>
        </div>
        <div style="background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 5px; border: 1px solid #444;">
            <div style="font-weight: bold; color: #d4af37;">Armor</div>
            <div style="font-size: 0.9em;">Nano-weave Combat Suit</div>
        </div>
    </div>
</div>

<!-- Collapsible Sections -->
<div style="margin: 20px 0;">
    <div style="border: 1px solid #444; border-radius: 5px; margin-bottom: 10px;">
        <div style="padding: 10px; background: #333; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
            <span>Background Story</span>
            <span>▼</span>
        </div>
        <div style="padding: 15px; border-top: 1px solid #444;">
            Your character's background story goes here...
        </div>
    </div>
</div>

<!-- Custom Scrollbar Example -->
<div style="max-height: 200px; overflow-y: auto; padding: 15px; border: 1px solid #444; border-radius: 5px; margin: 20px 0; scrollbar-width: thin; scrollbar-color: #d4af37 #333;">
    <p>This is an example of a scrollable container with a custom scrollbar. Useful for long sections of text or content that you want to keep compact.</p>
    <p>Add more content here to see the scrollbar in action...</p>
</div>

<!-- Modern Card Layouts -->
<h2>Modern UI Components</h2>

<!-- Glass-morphism Card -->
<div style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px; margin: 20px 0; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);">
    <h3 style="color: #d4af37; margin-bottom: 15px;">Glass Card Effect</h3>
    <p>A modern glass-morphism effect that works well for ethereal or high-tech characters.</p>
</div>

<!-- Neon Effect Card -->
<div style="background: #1a1a1a; border-radius: 10px; padding: 20px; margin: 20px 0; border: 1px solid #ff00ff; box-shadow: 0 0 10px #ff00ff, inset 0 0 10px #ff00ff;">
    <h3 style="color: #ff00ff; text-shadow: 0 0 5px #ff00ff; margin-bottom: 15px;">Neon Style</h3>
    <p style="color: #fff;">Perfect for cyberpunk or night city themed characters.</p>
</div>

<!-- Parchment Style -->
<div style="background: #f4e4bc; color: #2c1810; border-radius: 5px; padding: 20px; margin: 20px 0; box-shadow: 0 0 15px rgba(0,0,0,0.2); font-family: 'Crimson Text', serif;">
    <h3 style="color: #8b4513; font-family: 'Cinzel', serif; border-bottom: 2px solid #8b4513;">Scroll of Knowledge</h3>
    <p style="font-style: italic;">Ideal for medieval or fantasy-themed profiles.</p>
</div>

<!-- Flexible Grid Layout -->
<div style="margin: 20px 0;">
    <h3>Character Traits</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
        <!-- Personality Trait Card -->
        <div style="background: linear-gradient(135deg, #2a1810 0%, #1a1007 100%); padding: 15px; border-radius: 8px; border: 1px solid #d4af37;">
            <h4 style="color: #d4af37; margin-bottom: 10px;">Personality</h4>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li style="margin-bottom: 8px;">• Charismatic Leader</li>
                <li style="margin-bottom: 8px;">• Strategic Thinker</li>
                <li style="margin-bottom: 8px;">• Diplomatic</li>
            </ul>
        </div>
        <!-- Skills Card -->
        <div style="background: linear-gradient(135deg, #2a1810 0%, #1a1007 100%); padding: 15px; border-radius: 8px; border: 1px solid #d4af37;">
            <h4 style="color: #d4af37; margin-bottom: 10px;">Skills</h4>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li style="margin-bottom: 8px;">• Advanced Spellcasting</li>
                <li style="margin-bottom: 8px;">• Artifact Knowledge</li>
                <li style="margin-bottom: 8px;">• Ancient Languages</li>
            </ul>
        </div>
    </div>
</div>

<!-- Progress Circles -->
<div style="margin: 20px 0; display: flex; gap: 20px; flex-wrap: wrap;">
    <!-- Using SVG for circular progress indicators -->
    <div style="text-align: center;">
        <svg width="100" height="100" viewBox="0 0 36 36">
            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#444" stroke-width="3"/>
            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#d4af37" stroke-width="3" stroke-dasharray="75, 100"/>
            <text x="18" y="20.35" text-anchor="middle" fill="#d4af37" font-size="8">75%</text>
        </svg>
        <div style="color: #d4af37; margin-top: 5px;">Magic Power</div>
    </div>
    <div style="text-align: center;">
        <svg width="100" height="100" viewBox="0 0 36 36">
            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#444" stroke-width="3"/>
            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#ff4d4d" stroke-width="3" stroke-dasharray="90, 100"/>
            <text x="18" y="20.35" text-anchor="middle" fill="#ff4d4d" font-size="8">90%</text>
        </svg>
        <div style="color: #ff4d4d; margin-top: 5px;">Combat</div>
    </div>
</div>

<!-- Modern Tag Cloud -->
<div style="margin: 20px 0;">
    <h4>Character Tags</h4>
    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
        <span style="background: rgba(212, 175, 55, 0.2); color: #d4af37; padding: 5px 12px; border-radius: 15px; font-size: 0.9em; border: 1px solid #d4af37;">#Mage</span>
        <span style="background: rgba(255, 77, 77, 0.2); color: #ff4d4d; padding: 5px 12px; border-radius: 15px; font-size: 0.9em; border: 1px solid #ff4d4d;">#Warrior</span>
        <span style="background: rgba(77, 77, 255, 0.2); color: #4d4dff; padding: 5px 12px; border-radius: 15px; font-size: 0.9em; border: 1px solid #4d4dff;">#Scholar</span>
    </div>
</div>

<!-- Tabbed Info Cards -->
<div style="margin: 20px 0;">
    <div style="display: flex; flex-wrap: wrap; gap: 15px;">
        <div style="flex: 1; min-width: 250px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 15px; border: 1px solid #444;">
            <h4 style="color: #d4af37; margin-bottom: 10px;">Physical Description</h4>
            <div style="display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;">
                <span style="color: #888;">Height:</span>
                <span>6'2"</span>
                <span style="color: #888;">Build:</span>
                <span>Athletic</span>
                <span style="color: #888;">Hair:</span>
                <span>Silver</span>
                <span style="color: #888;">Eyes:</span>
                <span>Violet</span>
            </div>
        </div>
        <div style="flex: 1; min-width: 250px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 15px; border: 1px solid #444;">
            <h4 style="color: #d4af37; margin-bottom: 10px;">Combat Style</h4>
            <div style="display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;">
                <span style="color: #888;">Primary:</span>
                <span>Spellblade</span>
                <span style="color: #888;">Secondary:</span>
                <span>Battle Magic</span>
                <span style="color: #888;">Style:</span>
                <span>Aggressive</span>
            </div>
        </div>
    </div>
</div>

<!-- Note: All these components use inline styles for demonstration. 
     They can be customized with different colors, sizes, and content to match any character theme. -->

Rendered

HTML Example

Formatting Examples:

Italic text and bold text

List item 1
List item 2
- Subitem 2.1
- Subitem 2.2

Link example

def hello_world():
    print("Hello from HTML!")

Profile Building Blocks

Character Name

Race: Elven

Class: Mage

Age: 247

Height: 5'11"

Build: Slender

Eyes: Amber

SUBJECT PROFILE: XO-227[STATUS]: Active
[CLEARANCE]: Level 3
[DIVISION]: Deep Space Ops
[SPECIES]: Augmented Human
[IMPLANTS]: Neural Link v4.2
[ASSIGNMENT]: Scout Ship "Horizon"

Character Stats

Strength

Intelligence

"The stars whisper secrets to those who know how to listen..."

— Character's Memorable Quote

Relationships & Connections

Allies

Character 1
Character 2

Rivals

Character 3
Character 4

Character Timeline

Year 2157

First interstellar mission

Year 2160

Promoted to Squadron Leader

Equipment

Primary Weapon

Plasma Rifle Mk IV

Armor

Nano-weave Combat Suit

Background Story ▼

Your character's background story goes here...

This is an example of a scrollable container with a custom scrollbar. Useful for long sections of text or content that you want to keep compact.

Add more content here to see the scrollbar in action...

Modern UI Components

Glass Card Effect

A modern glass-morphism effect that works well for ethereal or high-tech characters.

Neon Style

Perfect for cyberpunk or night city themed characters.

Scroll of Knowledge

Ideal for medieval or fantasy-themed profiles.

Character Traits

Personality

• Charismatic Leader
• Strategic Thinker
• Diplomatic

Skills

• Advanced Spellcasting
• Artifact Knowledge
• Ancient Languages

75%

Magic Power

90%

Combat

Character Tags

#Mage #Warrior #Scholar

Physical Description

Height: 6'2" Build: Athletic Hair: Silver Eyes: Violet

Combat Style

Primary: Spellblade Secondary: Battle Magic Style: Aggressive