Difference between revisions of "Understanding the CLIO Rich Text Markup System"

Latest revision as of 19:12, 31 October 2022

This section contains CLIO documentation.

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.

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.

Documentation
Installation	Look and Feel
Interaction Modes	Developing Activity Types
Creating an Interactive	Framework
Integrating CLIO	Contribute

@@ Line 1: / Line 1: @@
-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.
+{{DocumentationPage}}
-{{Stub}}
+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'''.
 ==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.
@@ Line 85: / Line 85: @@
 |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.
 |}
+{{DocumentationNavigation}}