Understanding the CLIO Rich Text Markup System

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.

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]	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]	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.