Directory

← Back

prism-markdown-element

A LitElement that renders markdown with syntax highlight support

Author

Rating

Popularity

<100

<prism-markdown-element>

Published on webcomponents.org

prism-markdown-element is LitElement component inspired from markdown-element but with extra sugar properties

It allows render markdown to html with the help of prismjs and commonmark libraries

Install

npm i prism-markdown-element

import it

import 'prism-markdown-element/prism-markdown-element.js';

Features

  • Support highlight code syntax
  • Support the default themes from prismjs
  • Support custom theme from any url or path (should be a style link and a prismjs theme)

Properties

  • mdsrc markdown source url
  • markdown markdown text (string)
  • theme any prismjs theme ('coy', 'dark', 'funky', 'okaidia','solarizedlight', 'tomorrow', 'twilight')
  • customtheme custom theme url (should be a prismjs css )

Usage

No theme (prism as default) and remote markdown

<prism-markdown-element
mdsrc="https://gist.githubusercontent.com/GermanMtzmx/3855ed67c331bad39d2a625a597a83d5/raw/92399a9fd8b29ec7b750c111a45f0cf6eb532e86/testingMethodsInsideNestedDomIf.md">
</prism-markdown-element>

customtheme example

<prism-markdown-element
  customtheme="https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css"
  mdsrc="https://gist.githubusercontent.com/GermanMtzmx/3855ed67c331bad39d2a625a597a83d5/raw/92399a9fd8b29ec7b750c111a45f0cf6eb532e86/testingMethodsInsideNestedDomIf.md">
</prism-markdown-element>

markdown string and prismtheme

<prism-markdown-element
  theme="coy"
  markdown=" # Hello prism markdown element"
  >
</prism-markdown-element>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • commonmark#^0.28.1
  • lit-element#^2.0.0-rc.3
  • lit-html#^1.0.0-rc.2
  • prismjs#^1.15.0
Released
2019-01-24
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

prism-markdown-element - Vaadin Add-on Directory

A LitElement that renders markdown with syntax highlight support prism-markdown-element - Vaadin Add-on Directory
# \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/prism-markdown-element) **prism-markdown-element** is `LitElement` component inspired from [markdown-element](https://github.com/intcreator/markdown-element) but with extra sugar properties It allows render markdown to html with the help of `prismjs` and `commonmark` libraries **Install** ```shell npm i prism-markdown-element ``` **import it** ```js import 'prism-markdown-element/prism-markdown-element.js'; ``` ## Features * Support highlight code syntax * Support the default themes from `prismjs` * Support custom theme from any url or path (should be a style link and a prismjs theme) ## Properties * **mdsrc** markdown source url * **markdown** markdown text (string) * **theme** any `prismjs` theme ('coy', 'dark', 'funky', 'okaidia','solarizedlight', 'tomorrow', 'twilight') * **customtheme** custom theme url (should be a prismjs css ) ## Usage **No theme (prism as default) and remote markdown** ```html ``` **customtheme example** ``` html ``` **markdown string and prismtheme** ```html ```
Online