PhoenixDuskmoon.Component.Markdown (PhoenixDuskmoon v6.1.3)
View SourceDuskmoon 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
Generates a html customElement remark-element to preview markdown.
Functions
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 tofalse
.class
(:any
) - html attribute class. Defaults to""
.debug
(:boolean
) - remark-element attribute, enable debug. Defaults tofalse
.content
(:string
) - markdown content. Defaults to""
.