Using Rich Text Inputs to edit your HTML and Markdown data

Give your editors ultimate control by allowing them to write markup directly into your data files.

HTML

Editors will write in a WYSIWYG editor and save HTML back to your file.

Shown for inputs keys matching:

  • html
  • *_html
  • *-html
  • *Html
Screenshot of HTML Rich text input field
config.yml
sidebar_html: |
  <p>This paragraph has <em>emphasis</em> and <strong>strength</strong>.</p>
  <ol>
    <li>Walk</li>
    <li>Run</li>
  </ol>
  <p>Linking to <a href="/">index</a>.</p>

Markdown

Editors will write in a WYSIWYG editor and save Markdown back to your file.

Shown for inputs keys matching:

  • markdown
  • *_markdown
  • *-markdown
  • *Markdown
Screenshot of Markdown Rich text input field
Front Matter
markdown: |
  # Animals

   - Dogs
   - Cats

   > It's raining cats and dogs.

You’ll likely need to convert the Markdown value into HTML to use it on your site:

In your layout, use the markdownify function to render Markdown from front matter.

layout.html
{% if page.markdown %}
  {{ page.markdown | markdownify }}
{% endif %}
Was this article helpful? or Suggest an improvement >