Understanding the CLIO Rich Text Markup System

From CLIO

Paragraph and text formatting is stored using a lightweight markup language, closely based on the BBCode tag system. This allows formatting information, such as bold, italic and underlined text, to be stored within a plain text format like JSON. For example, storing “[b]Example[/b]” within a configuration file would cause the interface to render everything between the “[b]” and “[/b]” tags as bold, i.e. Example.

Imbox style.png

Markup Language

Only certain fields accept rich text markup language. Rich text is provided as a way to increase versatility, but it is not required. Rich text tags can be nested within each other, allowing nested lists and paragraphs with text formatting.

Name Tag Example
Paragraph [p]The quick brown fox jumps over the lazy dog.[/p][p]The quick brown fox jumps over the lazy dog.[/p][p]The quick brown fox jumps over the lazy dog.[/p] The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Heading 1 [h1]Example[/h1] Example
Heading 2 [h2]Example[/h2] Example
Heading 3 [h3]Example[/h3] Example
Heading 4 [h4]Example[/h4] Example
Heading 5 [h5]Example[/h5] Example
Bold This text is [b]bold[/b]. This text is bold.
Italic This text is [b]italic[/b]. This text is italic.
Underline This text is [b]underlined[/b]. This text is underlined.
Strikethrough This text is [s]strikethrough[/s]. This text is strikethrough.
Ordered List [ol][li]Example[li][/ol]
  1. Example
Unordered List [li]Example[li]
  • Example
Unordered List [ul][li]Example[li][/ul]
  • Example
Nested List [ol][li]Example[ul][li]Example[/li][li]Example[/li][/ul][/li][/ol]
  1. Example
    • Example
    • Example
Quote Block [quote]Example[/quote] Indented text with a rule on the left side.
Image [image]Example.png[/image] Single image that can be opened in a pop-up interface. Use a path relative to the @Media folder.
Image Set [imageset]examples/[/imageset] Multiple images that can be opened in a pop-up interface and scrolled through. Use a path relative to the @Media folder. This will add every image in a specified folder.