Perspective - Markdown

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.

Name

Description

Property Type

source

Text annotated with markdown syntax to display.

value: string

sectionSpacing

Number of pixels of vertical space between each section or header.

value: numeric

style

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

Click to see markdown properties

Name	Description	Property Type
sourcePos	If 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
skipHtml	Setting to true will skip inlined and blocks of HTML. Default is false.	value: boolean
disallowedTypes	Defines which types of types of nodes should be disallowed (not rendered).	array
unwrapDisallowed	Setting 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
renderers	Renders 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

User Manual

GETTING STARTED

MODULES AND PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

STRATEGIC PARTNER LINKS

RESOURCES

ALL USER MANUAL VERSIONS

Employees

Manually Adding Line Breaks