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

Surface Markdown

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

installation

Installation

Add surface_markdown to your list of dependencies in mix.exs:

def deps do
  [
    {:surface_markdown, "~> 0.5.0"}
  ]
end

global-configuration-optional

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.

config :surface, :components, [
  {
    Surface.Components.Markdown,
    default_class: "my-markdown-class",
    default_opts: [
      compact_output: false,
      ...
    ]
  }
]

css-styling

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

License

Copyright (c) 2021, Marlus Saraiva.

Surface source code is licensed under the MIT License.

properties

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

Slots

  • default - The markdown text to be translated to HTML

Link to this section Summary

Link to this section Functions

Link to this function

expand(attributes, content, meta)

View Source

Callback implementation for Surface.MacroComponent.expand/3.