Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 is here โ€“ Learn More

Skip to content
Froala Documentation

Markdown plugin

Plugins are fully functional during your trial once you've added your trial key to the setup.

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

Sign up

Download the code by signing up for our newsletter

Sign up

Download the code by signing up for our newsletter

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. - Froala as described in the Privacy Statement. Froala, Inc. - Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement.