View Source Surface.Components.Markdown (surface_markdown v0.7.0)

Surface Markdown

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.

Properties

  • class :string - The CSS class for the wrapping <div>
  • unwrap :boolean, static: true, default: false - Removes the wrapping <div>, if true
  • opts :keyword, static: true, 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.

Slots

  • default - The markdown text to be translated to HTML

Summary

Functions

Link to this function

expand(attributes, content, meta)

View Source

Callback implementation for Surface.MacroComponent.expand/3.