Packages

mdex

0.3.3
0.13.4 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

Security advisory: This version has known vulnerabilities. View advisories
HexDocs

Current section

Files

Jump to
Readme
70 Versions
2 Dependencies
36 Dependants
6 Advisories
Files
Activity
mdex examples alerts.html
Raw

examples/alerts.html 

<script src="https://cdn.tailwindcss.com"></script>

<h1>Alerts Example</h1>

<p>In this example we’ll render blockquotes as alerts.</p>

<p>Ref <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts">https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts</a></p>

<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">

    <h3>Render this note block as Markdown</h3>

<p>See more at <a href="https://github.com/leandrocp/mdex">https://github.com/leandrocp/mdex</a></p>

  </p>

</div>

<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">

    <h3 class="text-lg text-red-500">Render this caution block as HTML</h3>

See more at <a href="https://github.com/leandrocp/mdex" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">MDEx repo</a>

  </p>

</div>