A simple macro component that converts markdown into HTML at compile-time.

Global configuration (optional)

A set of global options you can set in config.exs. Available options are:

• default_class - The default CSS class for the wrapping <div>. It can be overridden using propety class.

• default_opts - The default set of options to be passed down to Earmark.as_html/2. It can be overridden using propety opts.

CSS Styling

Some CSS libs define their own styles for tags like <p>, <ul>, <ol>, <strong>, <h1> to <h6>, etc. This can make the rendered HTML look different from what you expect. One way to fix that is to customize the CSS class on the outer <div> of the generated code.

For instance, in Bulma, you can use the class content to handle WYSIWYG content like the HTML generated by the Markdown component.

You can have a default class applied globally using the default_class config:

config :surface, :components, [
  {Surface.Components.Markdown, default_class: "content"}
]

Or you can set/override it individually for each <#Markdown> instance using the class property.

Properties

• class :string - The CSS class for the wrapping <div>.
• unwrap :boolean, default: false - Removes the wrapping <div>, if true.
• opts :keyword, default: [] - Keyword list with options to be passed down to Earmark.as_html/2.

For a full list of available options, please refer to the Earmark.as_html/2 documentation. .