Difference between revisions of "Understanding the CLIO Rich Text Markup System"
From CLIO
Line 1: | Line 1: | ||
{{DocumentationPage}} | |||
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'''. | 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== | ==Markup Language== | ||
Line 83: | 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. | |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}} |
Latest revision as of 18:12, 31 October 2022
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 |
Ordered List | [ol][li]Example[li][/ol] |
|
Unordered List | [li]Example[li] |
|
Unordered List | [ul][li]Example[li][/ul] |
|
Nested List | [ol][li]Example[ul][li]Example[/li][li]Example[/li][/ul][/li][/ol] |
|
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 |