Markdown

INFO

In Avo 3.17 we renamed the markdown field easy_mde and introduced this custom one based on the Marksmith editor.

Please read the docs on the repo for more information on how it works.

This field is inspired by the wonderful GitHub editor we all love and use.

It supports applying styles to the markup, dropping files in the editor, and using the Media Library. The uploaded files will be taken over by Rails and persisted using Active Storage.

field :body, as: :markdown

WARNING

Please ensure you have these gems in your Gemfile.

gem "marksmith"

Supported features

• ActiveStorage file attachments
• Media Library integration
• Preview panel
• Ready-to-use renderer
• Text formatting
• Lists
• Links
• Images
• Tables
• Code blocks
• Headings

Customize the renderer

There are two places where we parse the markdown into the HTML you see.

1. In the controller
2. In the Show field component

You may customize the renderer by overriding the model.

# app/models/marksmith/renderer.rb

require "redcarpet"

module Marksmith
  class Renderer
    def renderer
      ::Redcarpet::Markdown.new(
        ::Redcarpet::Render::HTML,
        tables: true,
        lax_spacing: true,
        fenced_code_blocks: true,
        space_after_headers: true,
        hard_wrap: true,
        autolink: true,
        strikethrough: true,
        underline: true,
        highlight: true,
        quote: true,
        with_toc_data: true
      )
    end
  end
end