#Markdown

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


The <#Markdown> component allows users to write markdown content directly in a Surface template. The content will be validated and translated to HTML at compile-time.


Heading 3

Heading 2

Heading 1


This text is italic

This text is itatic and bold


Links

Tables

Id Name Value
1 The first item $10,00
2 The second $1.200,00
3 The Third $130

Lists

  1. Item 1
  2. Item 2
    • Subitem 1
    • Subitem 2

Note: This markdown text was converted into HTML at compile-time using the #Markdown component.


<#Markdown class="content">
  ### Heading 3

  ## Heading 2

  # Heading 1

  ---

  _This text is italic_

  _**This text is itatic and bold**_

  ---

  ### Links

  * [Source](https://github.com/msaraiva/surface/)
  * [Docs](http://surface-demo.msaraiva.io/documentation)

  ### Tables

  | Id     | Name           | Value      |
  | -------|----------------| ----------:|
  | 1      | The first item |     $10,00 |
  | 2      | The second     |  $1.200,00 |
  | 3      | The Third      |       $130 |

  ---

  ### Lists

    1. Item 1
    2. Item 2
      * Subitem 1
      * Subitem 2

  ---

  > **Note**: This `markdown` text was
  > converted into `HTML` at compile-time
  > using the `#Markdown` component.
</#Markdown>

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.


# Public API

Name Description Type Values Default
class The CSS class for the wrapping <div>.

:string
unwrap Removes the wrapping <div>, if true.

:boolean false
opts 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.

:keyword []