SlopUI.Components.Markdown (SlopUI v0.1.0)

Copy Markdown View Source

Markdown rendering with MDEx. MDEx is an optional dependency: add {:mdex, "~> 0.13"} to use this component.

Summary

Functions

Renders Markdown as HTML inside a .sl-prose container styled with the library's tokens (headings, lists, tables, code, blockquotes, task lists, footnotes).

Functions

markdown(assigns)

Renders Markdown as HTML inside a .sl-prose container styled with the library's tokens (headings, lists, tables, code, blockquotes, task lists, footnotes).

<.markdown text={@post.body} />
<.markdown text={@readme} sanitize={false} unsafe />

GitHub-flavoured extensions are on by default (tables, strikethrough, task lists, autolinks, footnotes). Output is sanitized unless sanitize={false}, and raw HTML in the source is dropped unless unsafe is set.

Code blocks are highlighted with Lumis, in light-dark() colours that follow the page's scheme, when the Lumis-enabled MDEx NIF is selected:

config :mdex_native, syntax_highlighter: :lumis

Without that, code blocks render unhighlighted but otherwise styled.

Attributes

  • text (:string) (required)
  • sanitize (:boolean) - clean the produced HTML (recommended for user content). Defaults to true.
  • unsafe (:boolean) - allow raw HTML from the source. Defaults to false.
  • extension (:list) - extra MDEx extension options, merged over the defaults. Defaults to [].
  • themes (:list) - Lumis themes for code blocks. Defaults to [light: "github_light", dark: "github_dark"].
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.