View Source Phoenix.WebComponent.Markdown (Phoenix.WebComponent v2.5.1)
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
Link to this section Summary
Functions
Generates a html customElement remark-element to preview markdown.
Link to this section 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
Examples
<.wc_markdown content={"# Hello"} class="dark" />
#=> <remark-element class="dark" content="# Hello"></remark-element>
<.wc_markdown content={"# Hello"} class="btn" />
#=> <remark-element class="btn" content="# Hello"></remark-element>
attributes
Attributes
id
-binary
remark-element html attribute idclass
-binary
remark-element html attribute class:debug
- print log in browser console:content
- The content of markdown, replace innerHTML.
attributes-1
Attributes
id
(:string
) - html attribute id. Defaults to""
.class
(:string
) - html attribute class. Defaults to""
.debug
(:boolean
) - remark-element attribute, enable debug. Defaults tofalse
.content
(:string
) - markdown content. Defaults to""
.