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

Installation

Add surface_markdown to your list of dependencies in mix.exs:

def deps do
  [
    {:surface_markdown, "~> 0.7.0"}
  ]
end

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 property class.

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

config :surface, :components, [
  {
    Surface.Components.Markdown,
    default_class: "my-markdown-class",
    default_opts: [
      compact_output: false,
      ...
    ]
  }
]

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.

<#Markdown class="content">
...
</#Markdown>

License

Copyright (c) 2021, Marlus Saraiva.

Surface source code is licensed under the MIT License.