A Markdown component for Surface



Surface Markdown

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


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

def deps do
    {:surface_markdown, "~> 0.5.0"}

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.

config :surface, :components, [
    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">


Copyright (c) 2021, Marlus Saraiva.

Surface source code is licensed under the MIT License.