{% extends 'base.html' %} {% block title %}babycode guide{% endblock %} {% block content %}

Babycode guide

{% set sections %}

What is babycode?

You may be familiar with BBCode, a loosely related family of markup languages popular on forums. Babycode is another, simplified, dialect of those languages. It is a way of formatting text by enclosing parts of it in special tags.

Text formatting tags

  • To make some text bold, enclose it in [b][/b]:
    [b]Hello World[/b]
    Will become
    Hello World
  • To italicize text, enclose it in [i][/i]:
    [i]Hello World[/i]
    Will become
    Hello World
  • To make some text strikethrough, enclose it in [s][/s]:
    [s]Hello World[/s]
    Will become
    Hello World
  • To underline some text, enclose it in [u][/u]:
    [u]Hello World[/u]
    Will become
    Hello World
  • To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in [big][/big]:
    [big]Hello World[/big]
    Will become
    {{ "[big]Hello World[/big]" | babycode | safe }}
  • Similarly, you can make text {{ "[small]small[/small]" | babycode | safe }} with [small][/small]:
    [small]Hello World[/small]
    Will become
    {{ "[small]Hello World[/small]" | babycode | safe }}
  • You can change the text color by using [color][/color]:
    [color=red]Red text[/color]
    [color=white]White text[/color]
    [color=#3b08f0]Blueish text[/color]
    Will become
    {{ "[color=red]Red text[/color]" | babycode | safe }}
    {{ "[color=white]White text[/color]" | babycode | safe }}
    {{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}
  • You can center text by enclosing it in [center][/center]:
    [center]Hello World[/center]
    Will become
    {{ "[center]Hello World[/center]" | babycode | safe }}
  • You can right-align text by enclosing it in [right][/right]:
    [right]Hello World[/right]
    Will become
    {{ "[right]Hello World[/right]" | babycode | safe }}
    • Note: the center and right tags will break the paragraph. See Paragraph rules for more details.

Emoji

There are a few emoji in the style of old forum emotes:

{% for emoji in __emoji %} {% endfor %}
Short code Emoji result
{{ ("[code]:%s:[/code]" % emoji) | babycode | safe }} {{ __emoji[emoji] | safe }}

Special thanks to the Forumoji project and its contributors for these graphics.

Paragraph rules

Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:

{{ '[code]paragraph 1\n\nparagraph 2[/code]' | babycode | safe }} Will produce:
{{ 'paragraph 1\n\nparagraph 2' | babycode | safe }}

To break a line without starting a new paragraph, end a line with two spaces:

{{ '[code]paragraph 1 \nstill paragraph 1[/code]' | babycode | safe }} That will produce:
{{ 'paragraph 1 \nstill paragraph 1' | babycode | safe }}

Additionally, the following tags will break into a new paragraph:

  • [code] (code block, not inline);
  • [img];
  • [center];
  • [right];
  • [ul] and [ol];
  • [quote].

Loose links (starting with http:// or https://) will automatically get converted to clickable links. To add a label to a link, use
[url=https://example.com]Link label[/url]:
Link label

Attaching an image

To add an image to your post, use the [img] tag:
[img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img] {{ '[img=/static/avatars/default.webp]the Python logo with a cowboy hat[/img]' | babycode | safe }}

Text inside the tag becomes the alt text. The attribute is the image URL. The text inside the tag will become the image's alt text.

Images will always break up a paragraph and will get scaled down to a maximum of 400px. However, consecutive image tags will try to stay in one line, wrapping if necessary. Break the paragraph if you wish to keep images on their own paragraph.

Multiple images attached to a post can be clicked to open a dialog to view them.

Adding code blocks

{% set code = 'func _ready() -> void:\n\tprint("hello world!")' %}

There are two kinds of code blocks recognized by babycode: inline and block. Inline code blocks do not break a paragraph. They can be added with [code]your code here[/code]. As long as there are no line breaks inside the code block, it is considered inline. If there are any, it will produce this:

{{ ('[code]%s[/code]' % code) | babycode | safe }}

Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}

Babycodes are not parsed inside code blocks.

Quoting

Text enclosed within [quote][/quote] will look like a quote:

A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.

Lists

{% set list = '[ul]\nitem 1\n\nitem 2\n\nitem 3 \nstill item 3 (break line without inserting a new item by using two spaces at the end of a line)\n[/ul]' %}

There are two kinds of lists, ordered (1, 2, 3, ...) and unordered (bullet points). Ordered lists are made with [ol][/ol] tags, and unordered with [ul][/ul]. Every new paragraph according to the usual paragraph rules will create a new list item. For example:

{{ ('[code]%s[/code]' % list) | babycode | safe }} Will produce the following list: {{ list | babycode | safe }}

Spoilers

{% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %}

You can make a section collapsible by using the [spoiler] tag:

{{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }} Will produce: {{ spoiler | babycode | safe }} All other tags are supported inside spoilers.
{% endset %} {{ sections | safe }}

Table of contents

{% set toc = sections | extract_h2 %}
{% endblock %}