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

HexDocs

Current section

Files

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

examples/alerts.html 

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

    Useful information that users should know, even when skimming content.

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

    Advises about risks or negative outcomes of certain actions.

  </p>

</div>

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