Format Text with Markdown

What is Markdown? ​

Markdown is a lightweight mark-up language with plain text formatting syntax. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to formatted text. ​
​
In-app Purchase: This feature requires Creative In-app or Pro Cloud Purchase. ​
​

Markdown Support ​

The supported Markdown syntax is as follows: ​
​

Header ​

Use syntax below followed by space or return key. You can also click on the Paragraph style and select "Header".​
# Header 1 ​
## Header 2 ​
### Header 3

# is a special character . To treat characters as ordinary text, press undo or backspace once.

Italics ​

Use syntax *sample text* followed by space or return key. You can also click on the "I" in the toolbar to italicize your selected words.​

*sample text* is a special character . To treat characters as ordinary text, press undo or backspace once.

Bold​

Use syntax **sample text** followed by space or return key. You can also click on the "B" in the toolbar to bold selected words.

**sample text** is a special character . To treat characters as ordinary text, press undo or backspace once.

Strikethrough ​

Use syntax ~~sample text~~ followed by space or return key. You can also click on the "S" or "T" icon in the toolbar to strike out your selected words.​

~~sample text~~ is a special character . To treat characters as ordinary text, press undo or backspace once.

Link ​

​Click on the + icon in toolbar > Click Link > Insert Link > Ok.

For JotterPad Android v12 & below, use syntax [Click to Open](https://2appstudio.com) .

Image ​

​
Android, iOS & Mac: Click the + icon in toolbar > tap Link > "Insert Image From URL" or "Insert Image From Gallery" or "Insert Image From Unsplash" > Ok.​

Web: Click on the + icon in toolbar > "Insert Image From URL" or "Insert Image From Gallery" or "Insert Image From Unsplash" > Ok.

For v12 & below, use syntax  .

Blockquote ​

Use syntax > Sample text followed by the return key. You can also click on Paragraph Style > Select "Blockquote".​

> is a special character . To treat characters as ordinary text, press undo or backspace once.

Unordered list ​

Use syntax * Sample text followed by the return key. You can also click on Paragraph Style > Select "Unordered List"​

* Sample text is a special character . To treat characters as ordinary text, press undo or backspace once.

Ordered List ​

Use syntax 1. Sample text followed by the return key. You can also click on Paragraph Style > Select "Ordered List".

To ignore auto-bulleting, press undo or backspace once.

Table ​

​Click on the + icon in toolbar > Select "Table" > change number of rows and columns. ​

For v12 & below, use syntax:

| Title 1 | Title 2 | Title 3 |
| ––– | ––– | ––– |
| Content 1 | Content 2 | Content 3 |

Task List ​

Method 1:

Use syntax [ ] followed by space or return key for uncheck task. ​
​
Use syntax [x] followed by space or return key for checked task. ​

[ ] and [x] are special character . To treat characters as ordinary text, press undo or backspace once.
For v13: Use syntax - [ ] Sample text followed by space or return key for uncheck task. ​Use syntax - [x] Sample text followed by space or return key for checked task. ​
​
Method 2:
Click on Paragraph style > Select "Task List".​
Select the box to check/uncheck the task.​

TeX Equation

Method 1:
​Click on the + icon in toolbar > Select "Inline TeX Equation" or "Block TeX Equation".

Method 2:
Use syntax $, followed by the mathematical expression, and finally with $. No whitespace is allowed in the mathematical expression. For example, $e^{x}$.

For more information, please refer to the article here.

$...$ is a special character . To treat characters as ordinary text, press undo or backspace once.

Code

Type Sample code with 1 backtick (`) at the start and end of the code followed by space or return key.

Pre-formatted Code

Type 3 backticks (```) at the start of the code followed by space or return key.

Example:

// the hello world program
console.log('Hello World');

Global Code Block Style:
The code block can be rendered as syntax highlighter, diagram, plot, graph and even musical notation when printed using markdown template. To declare the code block style to be rendered as globally, add codeBlockRenderAs parameter in the YAML of the document. For further customization, use codeBlockLanguage & codeBlockLineNumbers. Refer to the table in General parameters.

Local Code Block Style:
To declare the code block style to be rendered as locally†:



Type 3 backticks (```) at the start of the code followed by space or return key.
Press the </> button at the top right corner.
Choose a language.
Alternatively, type 3 backticks followed by the language (```name_of_style). Example:```python.
Add metadata information. Use , to add multiple parameters. E.g. renderAs=lstlisting, lineNumbers=left See table below.

Parameters	Possible Values	Examples
renderAs	lstlisting, verbatim, minted, abc , chordpro, mermaid	renderAs=lstlisting
lineNumbers	For lstlisting or minted. left, right, none	lineNumbers=left

You can also view music notation and mermaid diagrams by switching to preview mode in local code block.



For more on Listings, see 1 and 2. Additional Listings supported languages are: JavaScript, Kotlin.

† Render local code block style is only supported in the web app at the moment.

Special characters

These special characters are reserved for Markdown syntax. To treat characters as ordinary text, press "undo" or "backspace" once.

Asterisks in *text* followed by space or return key.
Underscore in _text_ followed by space or return key.
Hash mark in # followed by space or return key.
Plus sign in + followed by space or return key.
Asterisks in * followed by space or return key.
Minus sign (hyphen) in - followed by space or return key.
Right angle bracket in > followed by space or return key.
Tildes in ~~text~~ followed by space or return key.
Dot in 1. followed by space or return key
Dollar sign in $...$ followed by space or return key.

Please note that if you are opening Markdown document created from older version of JotterPad or other apps, these characters are treated as ordinary text only if there is backslash escape character in front of them in Markdown code†:

\\ backslash itself
\` backtick
\* asterisk
\_ underscore
\{ \} curly braces
\[ \] square brackets
\( \) parentheses
\> right angle bracket
\# hash mark
\+ plus sign
\- minus sign (hyphen)
\. dot
\! exclamation mark
\$ dollar
\| vertical bar
\~ tilde

† The Markdown code can be read in code mode </>

Read-only mode

To change to read-only mode:

Android:
Press ✓ at the top left of the bar in editor.

iOS:
Click on the … icon in the toolbar of the editor > Preview mode.

Mac & web:
Click on the 👓 Glasses icon found in the toolbar.

For v12 & below, tap the glasses icon/pencil icon to turn on/off the Markdown preview. ​

Please kindly note that we do not officially support Markdown syntax that are not listed above.

Updated on: 08/09/2022