New Signer Experience: Markdown Formatting - Part 1

Duo Liang, November 13, 2019
New Signer Experience: Markdown Formatting - part 1

Before the launch of the new signer experience, selecting a font style when customizing UI messages for a classic signing ceremony was difficult. There were limited supported styles, no common standard syntax, and it was time consuming to check the output effects. Now, with the new signer experience, OneSpan Sign utilizes a powerful markup language “Markdown”, which has made this process far simpler.

In this blog, we’ll demonstrate what Markdown can do, what a fully dressed page could look like with this technology and some basic syntax that is supported in our current implementation.

What is Markdown?

If you open any Git repository, for example OneSpan Sign Java SDK, you will find a “README.md” file with the project description. Markdow, is the language used in that file to format the content.11-13-1

Being so universal among developers, Markdown provides a standard, writable, and developer-friendly way to present your UI messages.

Scope of Markdown

Please be advised that not all pages support Markdown. It’s currently available in the:
•    Thank You Summary page
•    Error pages
•    Alerts

A fully dressed Thank You Summary page could resemble the following:11-13-2

Markdown Syntax

In the section below, browse some of the syntax that is widely used in Markdown.

Bold

To create bold text, wrap the text in double asterisks.

**bold text**

To avoid creating bold text, place a backslash (escape sequence, so total of two backslashes) in front of each asterisk.

\\*\\*ignore bold text**

11-13-3

Italic

To create bold text, wrap the text in single asterisks.

*italic text*

To avoid creating italic text, place a backslash in front

\*ignore italic text*

11-13-4

New Line

For a line break, add a backslash followed by an n (\n).

the first line\nthe second line

11-13-5

Extra Space

In order to add more than one spaces in a line, use a non-breaking space (“ ”). We will utilize this syntax when introducing nested list below.

Lists

Unordered lists can use either asterisks “*”, plus “+”, or hyphens “-” as list markers.

* item1\n
- item2\n
+ item3\n

11-13-6

Ordered lists use numbers followed by period “.” or right parenthesis “)”.

1. item1
2. item2
3. item3
or
1) item1
2) item2
3) item3

11-13-7

To use a nested list start with a new line and use four spaces in front of every sub-list item.

1) item1\n    a. sub-item11\n    b. sub-item12\n    c. sub-item13
2) item1\n    a. sub-item21\n    b. sub-item22\n    c. sub-item23
3) item1\n    a. sub-item31\n    b. sub-item32\n    c. sub-item33

11-13-8

Note:

Some of the lists above have indentation in front. It is therefore required to use a new line character (\n) twice after the list.

1) list1\n2) list2\n3) list3\n\na new paragraph

11-13-9

There it is. We have walked through half of the syntaxes used in Markdown. In part two of this blog series, we will finish up all the commonly used syntax and provide a good way to self-check the output effect before you submit your customization.

If you have any questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the Developer Community Forums. Your feedback matters to us!

OneSpan Sign Developer Community

Join the OneSpan Sign Developer Community! Forums, blogs, documentation, SDK downloads, and more.

Join Today