Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/germanmtzmx/prism-markdown-element
A LitElement that renders markdown with syntax highlight support
https://github.com/germanmtzmx/prism-markdown-element
commonmark litelement markdown prismjs webcomponent
Last synced: about 1 month ago
JSON representation
A LitElement that renders markdown with syntax highlight support
- Host: GitHub
- URL: https://github.com/germanmtzmx/prism-markdown-element
- Owner: GermanMtzmx
- License: mit
- Created: 2018-08-26T00:38:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T05:46:36.000Z (over 1 year ago)
- Last Synced: 2024-10-11T16:41:26.555Z (about 1 month ago)
- Topics: commonmark, litelement, markdown, prismjs, webcomponent
- Language: HTML
- Size: 65.4 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# \
[](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
```