# 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.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`.
```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).