PhoenixDuskmoon.Component.Markdown (PhoenixDuskmoon v7.2.1)

View Source

Duskmoon UI Markdown Component

Render markdown in to remark-element.

The remark-element supported markdown featrues:

  • github flavor
  • auto highlight code with lowlight.js and auto detect system light/dark themes.
  • charts render by mermaid.js

Require remark-element in your project.


    import '@gsmlg/lit/remark-element';

    <script type="module" src="https://esm.run/@gsmlg/lit"></script>
    <script type="module">
      import 'https://esm.run/@gsmlg/lit/remark-element';
    </script>

Summary

Functions

dm_markdown(assigns)

Generates a html customElement remark-element to preview markdown.

Functions

dm_markdown(assigns)

Generates a html customElement remark-element to preview markdown.

Docs of remark-element (See https://gsmlg-dev.github.io/lit/?path=/story/gsmlg-remark-element--basic).

Examples

<.dm_markdown class="dark"># Hello</.dm_markdown>
#=> <remark-element class="dark"># Hello</remark-element>

<.dm_markdown class="btn"># Hello</.dm_markdown>
#=> <remark-element class="btn"># Hello</remark-element>

Attributes

  • id (:any) - html attribute id. Defaults to false.
  • class (:any) - html attribute class. Defaults to "".
  • debug (:boolean) - remark-element attribute, enable debug. Defaults to false.
  • content (:string) - markdown content. Defaults to "".