https://github.com/treeder/marked-down
A simple markdown web component. Plug * Play
https://github.com/treeder/marked-down
javascript markdown web-components
Last synced: 5 months ago
JSON representation
A simple markdown web component. Plug * Play
- Host: GitHub
- URL: https://github.com/treeder/marked-down
- Owner: treeder
- License: mit
- Created: 2024-01-19T13:04:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-28T00:22:58.000Z (about 1 year ago)
- Last Synced: 2025-05-28T00:29:14.947Z (about 1 year ago)
- Topics: javascript, markdown, web-components
- Language: JavaScript
- Homepage:
- Size: 44.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Marked Down - a simple to use markdown web component
An ESM ready, drop in anywhere web component. This uses [marked](https://marked.js.org/) behind the scenes.
## Demo
[View demo](https://treeder.github.io/marked-down/)
## Quickstart
### Install with npm
```sh
npm install treeder/marked-down
```
### To use from CDN
#### Add Lit to importmap
This uses [Lit](https://lit.dev), so first [add Lit to your importmap](https://thingster.app/things/qT_iAr9PuPK2FVNJCxANY).
#### Import marked-down
Then import marked-down on the pages where you will use it:
```html
import 'https://cdn.jsdelivr.net/gh/treeder/marked-down@1/marked-down.js'
```
### Usage
The easiest way is to use the web component.
```html
import 'https://cdn.jsdelivr.net/gh/treeder/marked-down@1/marked-down.js'
## Marked Down is Cool!
Isn't it though? Why is it cool?
* It's easy
* It's fast
* It's simple
* It uses ESM modules
```
View code for the demo [here](/demo/index.html).
#### Adding marked-down to importmap
You can also add marked-down to your importmap and use it like this:
```html
{
"imports": {
LIT IMPORTS HERE (see above)
"marked-down": "https://cdn.jsdelivr.net/gh/treeder/marked-down@1/marked-down.js"
}
}
```
Then import on pages like this:
```html
import 'marked-down'
```
The rest is the same.