#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 []