Text Widget

Overview

The Text Widget component lets you add a text panel to the layout of apps you create with the App Builder components. Like other widgets, you can place Text Widgets inside Tabs of the app or directly inside Containers. The component supports plain text and GitHub-flavored Markdown, plus a ShapeDiver-specific extension for colors and formatting styles that standard Markdown does not include.

The component has one text input and outputs a widget that you can add to the app's layout.

In this example, the viewer container stays empty because the definition does not specify display geometry.

Markdown syntax

The text widget uses GitHub-flavored Markdown. You can find the full list of formatting instructions here. The examples below show some basic Markdown syntax:

# This is a H1 heading.

## This is a H2 heading.

This is normal text.

*This is italicized text.*

**This is bolded text.**

* This is a bullet point.

This is [a link](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax).

Table formatting

You can use the Markdown version that the component supports to format tables in text panels.

Text formatting with the ShapeDiver extensions

You can use the following syntax to format part of a text:

This is how to color :span[some words in blue]{color="blue"}.

You can use the extension to color text and apply subscript, superscript, and underline formatting:

:span[This is subscript.]{style="sub"}

:span[This is superscript.]{style="sup"}

:span[This is underlined.]{style="ins"}

Color extension

You can specify some primary colors by name, such as “blue” in the example above. Alternatively, you can specify any color with its hexadecimal representation:

Use a hashtag in front :span[of the hexa code]{color="#E233F3"}.

You can combine the extension with other Markdown instructions:

*:span[This is italic text.]{color="green"}*