static-cms/website/content/docs/widgets/markdown.md

---
label: "Markdown"
title: markdown
---

The markdown widget provides a full fledged text editor - which is based on [slate](https://github.com/ianstormtaylor/slate) - that allows users to format text with features such as headings and blockquotes. Users are also allowed to write in markdown by simply flipping a switch.

_Please note:_ If you want to use your markdown editor to fill a markdown file contents after its frontmatter, you'll have to name the field `body` so the CMS recognizes it and saves the file accordingly.

- **Name:** `markdown`
- **UI:** full text editor
- **Data type:** markdown
- **Options:**
  - `default`: accepts markdown content
  - `buttons`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`.
- **Example:**

  ```yaml
  - { label: 'Blog post content', name: 'body', widget: 'markdown' }
  ```

This would render as:

![Markdown widget example](/img/widgets-markdown.png)

_Please note:_ The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.
New design for the widgets section in the docs (#866) * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Rebased and updated the info according to @verythorough contribution * Fixing the yaml codes for the relation and select widget sections * Merging with widgets.md and app.j * Fixing some silly mistakes (sorry!) * Following @verythorough contributions :) * Adding the markdown widget and fixing the widgets container background * Adding the URL functionality and myself as a contributor :) * Adding myself as a contributor :) 2018-01-03 20:14:15 -02:00			`---`
docs(fix): revert prettier formatting on markdown files (#1612) Prettier formatting our markdown files is causing bugs because of the differences between Gatsby's parser and Prettier's. Also, Prettier formats the inline code-blocks containing example CMS configs, but the formatting it uses doesn't really make much sense or match the suggested CMS config style. It doesn't actually make much sense to format the docs anyway, since we use the CMS itself to edit/generate them. 2018-08-14 11:33:13 -06:00			`label: "Markdown"`
docs: make widget docs editable (#1782) * make widget docs editable * update widget doc frontmatter keys * improve docs preview * fix formatting * fix preview * add prism highlighting for previews * fix formatting * restore cms branch 2018-10-01 20:00:57 -04:00			`title: markdown`
New design for the widgets section in the docs (#866) * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Rebased and updated the info according to @verythorough contribution * Fixing the yaml codes for the relation and select widget sections * Merging with widgets.md and app.j * Fixing some silly mistakes (sorry!) * Following @verythorough contributions :) * Adding the markdown widget and fixing the widgets container background * Adding the URL functionality and myself as a contributor :) * Adding myself as a contributor :) 2018-01-03 20:14:15 -02:00			`---`

			`The markdown widget provides a full fledged text editor - which is based on [slate](https://github.com/ianstormtaylor/slate) - that allows users to format text with features such as headings and blockquotes. Users are also allowed to write in markdown by simply flipping a switch.`

docs: add markdown parsing clarification (#1598) 2018-11-02 17:27:48 +00:00			_Please note:_ If you want to use your markdown editor to fill a markdown file contents after its frontmatter, you'll have to name the field `body` so the CMS recognizes it and saves the file accordingly.
New design for the widgets section in the docs (#866) * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Rebased and updated the info according to @verythorough contribution * Fixing the yaml codes for the relation and select widget sections * Merging with widgets.md and app.j * Fixing some silly mistakes (sorry!) * Following @verythorough contributions :) * Adding the markdown widget and fixing the widgets container background * Adding the URL functionality and myself as a contributor :) * Adding myself as a contributor :) 2018-01-03 20:14:15 -02:00
			- Name: `markdown`
			`- UI: full text editor`
			`- Data type: markdown`
			`- Options:`
			- `default`: accepts markdown content
Update markdown widget documentation 2018-04-14 12:57:12 +02:00			- `buttons`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`.
New design for the widgets section in the docs (#866) * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Initial commit for the new widgets section * Placing all the widgets and refining the CSS and Hugo logic * Rebased and updated the info according to @verythorough contribution * Fixing the yaml codes for the relation and select widget sections * Merging with widgets.md and app.j * Fixing some silly mistakes (sorry!) * Following @verythorough contributions :) * Adding the markdown widget and fixing the widgets container background * Adding the URL functionality and myself as a contributor :) * Adding myself as a contributor :) 2018-01-03 20:14:15 -02:00			`- Example:`
docs: add markdown parsing clarification (#1598) 2018-11-02 17:27:48 +00:00
			```yaml
			`- { label: 'Blog post content', name: 'body', widget: 'markdown' }`
			```

			`This would render as:`

			`![Markdown widget example](/img/widgets-markdown.png)`

			`_Please note:_ The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.`