Days
Hours
Minutes
Seconds
x

New Froala Editor v4.5.2 is here – Learn More

Skip to content

Markdown plugin

Format words & phrases in our rich text editor using code shortcuts through predefined markdown syntax.

When in markdown mode, the Froala Editor provides an easy split screen view so users can see the changes in real-time.

Users can markdown Heading, Bold Text ,Italic, Blockquote, Ordered list , Unordered list, Code, Fenced code block, Horizontal rule, Link , Image, Table, Footnote , Strikethrough and Task list.

The list of Froala Markdown Syntax:


Element Markdown Syntax (Code)
Heading # H1
## H2
### H3
Heading ID ### My Great Heading {#custom-id}
Bold **bold text**
Italic *italicized text*
Strikethrough ~~The world is flat.~~
Blockquote > blockquote
Ordered List 1. First item
2. Second item
3. Third item
Unordered List - First item
- Second item
- Third item
emphasis * item
Code `code`
Fenced Code Block ```
{
“firstName”: “John”,
“lastName”: “Smith”,
“age”: 25
}
```
Horizontal Rule ---
Link [title](<https://www.example.com> "title")
Image ![alt text](image.jpg)
Table | Syntax | Description |
| --- | ---|
| Header | Title |
| Paragraph | Text |
Footnote Here’s a sentence with a footnote. [^1]
[^1]: This is the footnote.
Definition List term
: definition
Task List - [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

For example, to denote a heading, users can add a hashtag before the word (e.g. #Heading1, #Heading2). Or to italicize text, *italic text*. Users can also markdown Bold Text, Blockquotes, Ordered or Unordered lists, Code blocks, Images, Task lists, and many more!

Plugin methods:

 

markdown.isEnabled ()
returns: boolean
Find if markdown mode is active.
markdown.toggle ()
returns: –
Toggle between the markdown and text view.
markdown.refresh ($btn)
returns: Array

Check if the markdown is enabled and set the state of the markdown button.


 

  • $btn: The markdown button element.

Type: DOM Object

 

Add Plugin to your code:

 

Plugin name: markdown

Toolbar button:
markdown

Plugin Stylesheet:

 ../css/plugins/markdown.min.css

 Or from CDN

 https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/markdown.min.css

Plugin JS Script:

 ../js/plugins/markdown.min.js

 Or from CDN

 https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/markdown.min.js

Example:

Ready to dive in? Explore our plans