User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:

Description

The Markdown component allows users to format any type of text so it is publishable as plain text without looking like it's been marked up with tags or formatting instructions. The Markdown component provides is a lightweight formatting language which is easy to write and easy to read. Markdown's formatting syntax only addresses issues that can be conveyed in plain text. For any marked up content that is not covered by Markdown's syntax, you can use HTML. You can even change the color of text in the component with HTML tags using the 'source' prop in the Property Editor as shown in Example 2.

To learn more about how to use Markdown component for publishing plain text, refer to the following articles: Markdown Basics and Markdown Node Types.

Manually Adding Line Breaks

If you would like to manually add line breaks, the most direct approach would be to disable the escapeHTML property, and add your own paragraph and line break elements. Once disabled, you can add line breaks as seen below:

Value of "source"

<p>
one <br>
two <br>
three <br>
four
five
</p>

Because there isn't a line break between "four" and "five", they're on the same line. 



Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
sourceText annotated with markdown syntax to display.value: string
sectionSpacingNumber of pixels of vertical space between each section or header.value: numeric
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
markdown

Lightweight formatting language that is easy to write and easy to read.

NameDescriptionProperty Type
sourcePosIf true, will keep track and log source positioning for debugging purposes. Default is false.value: boolean
escapeHtml

Setting to false will cause HTML to be rendered. Be aware that setting this to false might cause security issues if the input is user-generated. Use at your own risk. Default is true.

value: boolean
skipHtmlSetting to true will skip inlined and blocks of HTML. Default is false.value: boolean
disallowedTypesDefines which types of types of nodes should be disallowed (not rendered).array
unwrapDisallowedSetting to true will try to extract/unwrap the children of disallowed nodes. For instance, if disallowing Strong, the default behavior is to simply skip the text within the strong altogether, while the behavior some might want is to simply have the text returned without the strong wrapping it. Default is false.value: boolean
renderersRenders in a browser as plain text.object
object

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples
Example 1


Property

Value

props.source

MARKDOWN source:

Markdown **[ basic syntax ](https://www.markdownguide.org/basic-syntax/)** link.

From <https://www.markdownguide.org>.

Text formatting examples:
# Heading 1
## Heading 2
### Heading 3
** Bold text**


*Italic text*


***Bold and Italic text***

Line of plain text

Many other formatting options are listed online.

Example 2

The following code was used in the example below and pasted into the 'source' property of the Markdown component. 

<p style="color:#AC00AC;"><B> Adding Color to your Text in the <BR>Markdown component </p





  • No labels