You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
9.3 KiB
296 lines
9.3 KiB
The textout BBcode markup language
|
|
==================================
|
|
|
|
The BBcode markup language mainly uses tags, which the starting mark looks
|
|
like ``[xxx]`` and the ending mark looks like ``[/xxx]``. You can add an
|
|
attribute to the starting mark to modify the tag's behaviour.
|
|
|
|
There is a generic/quick ending mark which looks like ``[/]``.
|
|
It cannot be used with all tags, so when it is used in the examples below,
|
|
suppose you can use it, otherwise, it might not be possible (or not
|
|
implemented yet).
|
|
|
|
--------------
|
|
Align the text
|
|
--------------
|
|
|
|
To align the text, you can use either ``[<alignment mode>]`` or
|
|
``[align=<alignment mode>]`` with any of the following modes:
|
|
|
|
- ``left``: the text is left-aligned;
|
|
- ``right``: the text is right-aligned;
|
|
- ``center``: the text is aligned at the horizontal middle of the document;
|
|
- ``justify``: the text is justified, i.e. the text spaces are optimized for
|
|
the right'n'word to end at the right of the line.
|
|
|
|
For example, to right-align some text, you could do something like this:
|
|
|
|
.. code::
|
|
|
|
[right]some text[/]
|
|
|
|
----------------
|
|
Inserting titles
|
|
----------------
|
|
|
|
Do you want to include titles or subtitles to your message, integrated with
|
|
the website's design? Use the ``[title]`` and ``[subtitle]`` tags for that:
|
|
|
|
.. code::
|
|
|
|
[title]Just do it![/]
|
|
[subtitle]Don't let your dreams be dreams![/]
|
|
|
|
Notice that this tag cannot embed another tag.
|
|
|
|
----------------
|
|
Styling the text
|
|
----------------
|
|
|
|
You can add some basic text style by using the following tags:
|
|
|
|
- ``[b]`` for **bold** text;
|
|
- ``[i]`` for *italic* text;
|
|
- ``[u]`` for underlined text;
|
|
- ``[o]`` for overlined text;
|
|
- ``[s]`` or ``[strike]`` for striked text.
|
|
|
|
They can all be ended with the generic ending mark ``[/]``.
|
|
|
|
----------------------
|
|
Changing the text font
|
|
----------------------
|
|
|
|
You can change the font of the text by using the ``[font=xxx]`` (or ``[xxx]``
|
|
directly, where ``xxx`` represents the font identifier) tag. The following
|
|
fonts are available:
|
|
|
|
- ``arial`` represents Arial;
|
|
- ``comic`` represents Comic MS;
|
|
- ``tahoma`` represents Tahoma;
|
|
- ``courier`` represents Courier;
|
|
- ``haettenschweiler`` represents Haettenschweiler;
|
|
- ``mono`` and ``monospace`` represents the basic monospace font.
|
|
|
|
They can be ended with the generic ending mark ``[/]`` as well.
|
|
|
|
-----------------------
|
|
Changing the text color
|
|
-----------------------
|
|
|
|
You can change the color of the text using the ``[color=xxx]`` (or ``[xxx]``
|
|
directly for simple colors, where ``xxx`` represents the color) tag. This
|
|
tag accepts several types of values:
|
|
|
|
- simple color names (`inspired from CSS <CSS named colors_>`_) such as
|
|
``red``, ``blue``, ``green``, ``transparent``;
|
|
- color hex codes using a hash (``#``) followed by hex digits, e.g.
|
|
``#01020F``, where the first group of hex digits represents the
|
|
red component from 0 to 255, the second group of hex digits represents
|
|
the green component from 0 to 255, and the third group of hex digits
|
|
represents the blue component from 0 to 255.
|
|
Incomplete composites will be filled by zero on the left (e.g. ``#0000F``
|
|
is equivalent to ``#00000F``), invalid characters such as ``A`` will be
|
|
replaced by 0s;
|
|
- three hex digits codes using ``#`` followed by three hex digits, e.g.
|
|
``#123`` which will be translated to ``#112233``;
|
|
- ``rgb(<red>, <green>, <blue>)``, where the red, green and blue components
|
|
are represented using decimal digits and are between 0 and 255 included;
|
|
- ``rgba(<red>, <green>, <blue>, <alpha>)``, where the red, green and blue
|
|
components are expressed as said before and the alpha component is either
|
|
expressed as a percentage (e.g. ``12.34%``) or as a proportion between
|
|
``0.0`` and ``1.0``;
|
|
- ``hsl(<hue>, <saturation>, <light>)`` or
|
|
``hls(<hue>, <light>,<saturation>)``;
|
|
- ``hsl(<hue>, <saturation>, <light>, <alpha>)`` or
|
|
``hls(<hue>, <light>, <saturation>, <alpha>)``;
|
|
- ``hwb(<hue>, <white proportion>, <black proportion>)``.
|
|
|
|
Here are some examples:
|
|
|
|
.. code::
|
|
|
|
[blue]I'm blue![/]
|
|
[color=#ff69b4]That color is called “Cuisse de Nymphe émue”![/]
|
|
[color=rgb(255, 255,255,0.4)]I'm black![/]
|
|
[color=hsl(0,100%, 0.5)]I'm red![/]
|
|
|
|
--------------------
|
|
Inserting hyperlinks
|
|
--------------------
|
|
|
|
Creating hyperlinks on a bunch of text is possible through the ``[url]`` tag.
|
|
The URL has to be either absolute, relative, or related to an anchor. It has
|
|
to be passed to the tag either through the argument (which allows the content
|
|
to be the displayed title of the link) or through the content if there is
|
|
no argument. By default, if there is no content and an argument, the argument
|
|
will be taken as the link title.
|
|
|
|
Here are examples:
|
|
|
|
.. code::
|
|
|
|
[url]https://planet-casio.com[/]
|
|
[url=https://planet-casio.com]Planète Casio[/]
|
|
[url=/relative/url.html][/]
|
|
|
|
For links to profiles, the ``[profil]`` and ``[profile]`` tags can be used.
|
|
They take no attribute but take a content which is the user whose the profile
|
|
is to be linked's name. For example:
|
|
|
|
.. code::
|
|
|
|
[profil]Cakeisalie5[/]
|
|
|
|
For links to topics and tutorials, the ``[topic]`` and ``[tutorial]``
|
|
tags can be used. They take no attribute but take a content which is the
|
|
identifier of the topic or tutorial to which to link to.
|
|
For example:
|
|
|
|
.. code::
|
|
|
|
[topic]234[/]
|
|
[tutorial]32[/]
|
|
|
|
For links to programs, the ``[program]`` and ``[prog]`` tags can be used.
|
|
They take no attribute but take a content which is the identifier of the
|
|
program to which to link to. For example:
|
|
|
|
.. code::
|
|
|
|
[program]3598[/program]
|
|
|
|
---------------
|
|
Quoting someone
|
|
---------------
|
|
|
|
To quote someone visually, you can use the ``[quote]`` tag, which takes the
|
|
name of the person you're quoting as the attribute and the quote as the
|
|
content. A quote can contain another one, of course. If there is no name,
|
|
the display will just be generalistic.
|
|
|
|
Here are examples:
|
|
|
|
.. code::
|
|
|
|
[quote]Someone said that.[/]
|
|
[quote=Cakeisalie5]Ever realized that my name contained “Cake”?[/]
|
|
|
|
-------------------------
|
|
Spoilers/Content Warnings
|
|
-------------------------
|
|
|
|
To hide something behind a deliberate action of your user, usually to avoid
|
|
hurting people or to hide the solution to a problem, you can use the
|
|
``[spoiler]`` tag.
|
|
|
|
.. code::
|
|
|
|
[spoiler]This is hidden![/]
|
|
[spoiler=Uncover the dark secrets of the night]Boo![/]
|
|
[spoiler=Uncover this!|Cover this quick!!]BOOO![/]
|
|
|
|
---------------
|
|
Presenting code
|
|
---------------
|
|
|
|
There are two code tags:
|
|
|
|
- ``[code]``, which is supposed to be used as a block for multiline code or
|
|
to isolate the code from the text;
|
|
- ``[inlinecode]`` or the *backquotes* to include code in the text.
|
|
|
|
For example:
|
|
|
|
.. code::
|
|
|
|
[code]Some multiline code, with [center]tags shown as they are[/center].
|
|
Incredible, heh?[/code]
|
|
[inlinecode]Some inline code.[/inlinecode]
|
|
`Some more inline code.`
|
|
|
|
------------------
|
|
Inserting an image
|
|
------------------
|
|
|
|
In order to insert an image, you will have to use the ``[img]`` tag. It will
|
|
make a new paragraph containing the image which the URL is given in the
|
|
tag content. The tag can be bundled with some attributes, separated with
|
|
the pipe (``|``) character:
|
|
|
|
- ``<width>x<height>``: set the dimensions to the image. If the width isn't
|
|
given (i.e. if this attribute starts with ``x``), the height will be set
|
|
automatically. If the height isn't given (i.e. no ``x`` or nothing after
|
|
the ``x``), the width will be set automatically;
|
|
- ``left``, ``right``, ``center``: align the image accordingly;
|
|
- ``float``: make the image float, i.e. let the text be where the image isn't.
|
|
|
|
For example:
|
|
|
|
.. code::
|
|
|
|
[img=right|float|x24]https://example.org/image.jpg[/]
|
|
|
|
is a right-aligned image, floating (which means text will be allowed on
|
|
the left of the image), and with a height of 24 pixels and an automatic
|
|
width.
|
|
|
|
Planète Casio admins can use the ``[adimg]`` tag which is equivalent to the
|
|
``[img]`` tag but adds the special admin image folder prefix to the image
|
|
URLs, so this is possible:
|
|
|
|
.. code::
|
|
|
|
[adimg]incredible.jpg[/]
|
|
|
|
-----------------
|
|
Inserting a video
|
|
-----------------
|
|
|
|
This BBcode translator has the ability to integrate videos from some online
|
|
platforms into your message, as a block. To do this, you can use the
|
|
``[video]`` and ``[video tiny]`` tags. For example:
|
|
|
|
.. code::
|
|
|
|
[video]https://www.youtube.com/watch?v=yhXpV8hRKxQ[/]
|
|
[video tiny]https://www.youtube.com/watch?v=yhXpV8hRKxQ[/]
|
|
|
|
------------------------
|
|
Inserting a progress bar
|
|
------------------------
|
|
|
|
Do you want to present how your project is evolving using a simple graph,
|
|
the progress bar? This is possible using the ``[progress]`` tag, which takes
|
|
the percentage (between 0 and 100 included) of the advancement as its
|
|
attribute. For example:
|
|
|
|
.. code::
|
|
|
|
[progress=50]Building a great wall…[/]
|
|
[progress=100][/]
|
|
|
|
----------------------------
|
|
Inserting labels and targets
|
|
----------------------------
|
|
|
|
Is your message in several parts and you only want to link one without using
|
|
an entire separate page for the section? This is the tag you might want
|
|
to use. To link to a point in your message:
|
|
|
|
- first, define the label using the ``[label]`` tag, with the name of the
|
|
label as the attribute;
|
|
- then link to the label using the ``[target]`` tag.
|
|
|
|
You are not obliged to terminate the ``[label]`` tag (the original version of
|
|
it didn't support the ``[label]`` tag termination, in fact). For example:
|
|
|
|
.. code::
|
|
|
|
[label=sometag][subtitle]Some chapter[/subtitle]
|
|
|
|
...
|
|
|
|
[target=sometag]Go back to the beginning of the chapter[/]
|
|
|
|
.. _CSS named colors: https://drafts.csswg.org/css-color/#named-colors
|
|
|