README.md

# 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`:

```elixir
def deps do
  [
    {:surface_markdown, "~> 0.5.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 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`.

```elixir
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:

```elixir
config :surface, :components, [
  {Surface.Components.Markdown, default_class: "content"}
]
```

Or you can set/override it individually for each `<#Markdown>` instance using
the `class` property.

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

## License

Copyright (c) 2021, Marlus Saraiva.

Surface source code is licensed under the [MIT License](LICENSE).