| Log-In

BBCode Formatting Guide

▸▸ Last updated: April 24, 2026

1. Introduction

PikiDiary supports BBCode (Bulletin Board Code) for formatting your profile bio. BBCode uses square brackets [ ] to wrap formatting tags, similar to HTML but simpler and more intuitive.

Bios on PikiDiary will always be 149px in width, so keep that in mind when creating your assets.

This guide covers all available BBCode tags and their usage.

2. Text Formatting

Bold

Make text bold using [b] tags:

[b]This text is bold[/b]
This text is bold

Italic

Make text italic using [i] tags:

[i]This text is italic[/i]
This text is italic

Underline

Underline text using [u] tags:

[u]This text is underlined[/u]
This text is underlined

Strikethrough

Strike through text using [s] tags:

[s]This text is struck through[/s]
This text is struck through

Small Text

Make text smaller using [small] tags:

[small]This is small text[/small]
This is small text

Line Break

Insert a line break using [br]:

Line one[br]Line two
Line one
Line two

Comments

Add comments (invisible in output) using /* */:

Visible text /* this is a comment */ more visible text

3. Images & Media

Images

Embed images using [img] tags:

[img]https://example.com/image.png[/img]

Make sure to use direct image URLs (ending in .png, .jpg, .gif, .webp, etc.).

Audio

Embed audio players using [music] tags:

[music]https://example.com/song.mp3[/music]

You can add the loop option:

[music=loop]https://example.com/song.mp3[/music]

Custom Cursor

Change the cursor style using [cursor] tags. Accepts CSS cursor names or image URLs:

[cursor]pointer[/cursor]
[cursor]https://example.com/cursor.cur[/cursor]

Supported CSS cursor values: auto, default, pointer, text, move, grab, grabbing, wait, help, not-allowed, crosshair, cell, copy, alias, progress, zoom-in, zoom-out, context-menu, no-drop.

4. Layout & Styling

PikiDiary supports advanced layout controls using [container] or [layout] tags (they are interchangeable). These allow you to apply CSS styles for custom layouts.

Basic Container

[container]Content inside a container[/container]
Content inside a container

Styled Container

Apply CSS styles using comma-separated property: value pairs:

[container=color: #ff6b6b, background-color: #ffeaea, padding: 10px, border-radius: 5px]Styled content[/container]
Styled content

Flexbox Layout

For readability, I'm using [layout] for the parent flex container and [container] for children:

[layout=display: flex, gap: 10px, background-color: #f0f0f0, padding: 10px]
[container=flex: 1, background-color: #ffcccc, padding: 8px]Item 1[/container]
[container=flex: 1, background-color: #ccffcc, padding: 8px]Item 2[/container]
[container=flex: 1, background-color: #ccccff, padding: 8px]Item 3[/container]
[/layout]
Item 1
Item 2
Item 3

Grid Layout

For readability, I'm using [layout] for the parent grid container and [container] for children:

[layout=display: grid, grid-template-columns: 1fr 1fr, gap: 8px, padding: 10px]
[container=background-color: #ffd700, padding: 8px]A[/container]
[container=background-color: #ffd700, padding: 8px]B[/container]
[container=background-color: #ffd700, padding: 8px]C[/container]
[container=background-color: #ffd700, padding: 8px]D[/container]
[/layout]
A
B
C
D

Marquee

Create scrolling text with [marquee]:

[marquee]Scrolling text![/marquee]
Scrolling text!

Links

Create hyperlinks using [url] tags:

[url=https://example.com]Click here[/url]
Click here

All links open in a new tab for security.

5. Advanced Features

Supported CSS Properties

When using [container] or [layout], the following CSS properties are supported:

  • Layout: display, flex, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-basis, grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-flow, grid-auto-columns, grid-auto-rows, grid-column, grid-row, grid-area, gap, row-gap, column-gap
  • Positioning: position, top, right, bottom, left, inset, z-index
  • Sizing: width, height, min-width, min-height, max-width, max-height, margin, padding
  • Appearance: color, background-color, opacity, border, border-radius, box-shadow, text-align, font-size, font-weight, line-height, text-decoration, text-decoration-color, text-decoration-line
  • Other: overflow, overflow-x, overflow-y

Display Presets

You can use shorthand display values without the display: prefix:

[container=flex, gap: 10px]...[/container]

Supported presets: flex, grid, table, inline-grid, inline-flex, inline-table, block, inline, contents, flow-root.

Nesting

BBCode tags can be nested for complex layouts. Use [layout] for parent containers and [container] for children:

[layout=display: flex, gap: 10px]
[layout=flex: 1, display: flex, flex-direction: column, gap: 5px]
[container=background-color: #ff9999, padding: 5px]Header[/container]
[container=flex: 1, background-color: #f0f0f0, padding: 5px]Content area[/container]
[/layout]
[container=flex: 1, background-color: #99ff99, padding: 5px]Sidebar[/container]
[/layout]

Security Notes

  • All CSS values are validated against a whitelist to prevent XSS attacks
  • url() functions in CSS are blocked except for cursor images
  • expression(), javascript:, vbscript:, and data: URIs are blocked
  • Only safe color formats are allowed (hex, rgb, rgba, hsl, hsla, named colors)
  • Opacity must be between 0 and 1

Tips & Best Practices

  • Use gap instead of margins for spacing between flex/grid items
  • Set max-width: 100% on images to make them responsive
  • Use overflow: hidden to clip content that overflows its container
  • Combine display: flex with justify-content and align-items for alignment
  • Use background-color with color to create colored text blocks