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
This section could use more detail. You can help by expanding it.

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.
Retrieved from "https://wiki.interpretive.tech/index.php?title=Understanding_the_CLIO_Rich_Text_Markup_System&oldid=1442"