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 JS Script:
    ../js/plugins/markdown.min.js

    Or from CDN

    https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/markdown.min.js

    Example:

    https://froala.com/wysiwyg-editor/examples/markdown-support/