Packages
mdex
0.2.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.5
retired
0.12.4
0.12.3
0.12.2
0.12.1
0.12.0
0.11.7
0.11.6
0.11.5
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.0
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
Fast and extensible Markdown for Elixir
Current section
Files
Jump to
Current section
Files
examples/alerts.exs
Mix.install([
{:mdex, path: ".."}
])
opts = [
extension: [autolink: true],
render: [unsafe_: true],
features: [sanitize: false]
]
markdown = """
# Alerts Example
In this example we'll render blockquotes as alerts.
Ref https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
"""
note_html = fn content ->
"""
<div class="max-w-md rounded-lg border bg-background p-4 shadow-sm mt-10" role="alert">
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="text-blue-500"
>
<path d="M8 2v4" />
<path d="M16 2v4" />
<path d="M3 10h18" />
<path d="M10 14h4" />
<path d="M12 12v6" />
<rect width="18" height="18" x="3" y="4" rx="2" />
</svg>
<h5 class="text-sm font-medium text-blue-500">Note</h5>
</div>
<p class="mt-2 text-sm text-muted-foreground">
#{content}
</p>
</div>
"""
end
caution_html = fn content ->
"""
<div class="max-w-md rounded-lg border border-red-200 bg-red-50 p-4 shadow-sm mt-10" role="alert">
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="text-red-500"
>
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
<path d="M12 9v4" />
<path d="M12 17h.01" />
</svg>
<h5 class="text-sm font-medium text-red-500">Caution</h5>
</div>
<p class="mt-2 text-sm text-red-700">
#{content}
</p>
</div>
"""
end
html =
markdown
|> MDEx.parse_document!(opts)
|> MDEx.traverse_and_update(fn
# inject tailwind
{"document", attrs, children} ->
tailwind =
MDEx.parse_document!("""
<script src="https://cdn.tailwindcss.com"></script>
""")
{"document", attrs, children ++ tailwind}
# inject a html block to render a note alert
{"block_quote", _attrs, [{"paragraph", [], ["[!NOTE]", _note_attrs, note_content]}]} ->
alert = note_html.(note_content)
{"html_block", [{"literal", alert}], []}
# inject a html block to render a caution alert
{"block_quote", _attrs, [{"paragraph", [], ["[!CAUTION]", _note_attrs, note_content]}]} ->
alert = caution_html.(note_content)
{"html_block", [{"literal", alert}], []}
node ->
node
end)
|> MDEx.to_html!(opts)
File.write!("alerts.html", html)
IO.puts(html)