Markdown Label Demo

This demo shows how to create labels using Markdown syntax.

The label style implementation MarkdownLabelStyle uses markdown-it to transpile Markdown syntax into HTML. The actual rendering of the HTML text is done by MarkupLabelStyle.

Label Editor

Creating and Editing Labels

• Press the F2 key while an element or connection is selected.
• Insert Markdown text into the editor, i.e. **Hello World**.
• Press Shift + Enter to enter a newline.

Supported Markdown

The Markdown elements supported by this style labels are

• # Headings
• *emphasis* and **strong** text
• ~~strikethrough~~ text
• `code` and
  ```
  code blocks
  ```
• Newlines, with trailing backslash\
• Paragraphs, using two subsequent newlines

Styling Labels with CSS

Since the markdown label style delegates to MarkupLabelStyle for rendering, elements can be styled with CSS classes.

The stylesheet for labels markdown-label.css shows how the label texts are styled with external CSS.

Text Wrapping

Markdown labels can use line wrapping. In this demo application, the labels use word wrapping with ellipsis. Select and resize a node to observe the interactive text wrapping. Markdown labels can also be wrapped at character boundaries.