Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xan105/web-component-markdown
Web-component to render markdown into html with syntax highlighting
https://github.com/xan105/web-component-markdown
browser esbuild esm markdown web-component
Last synced: 3 days ago
JSON representation
Web-component to render markdown into html with syntax highlighting
- Host: GitHub
- URL: https://github.com/xan105/web-component-markdown
- Owner: xan105
- License: mit
- Created: 2023-01-19T08:53:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-10T10:02:07.000Z (3 months ago)
- Last Synced: 2024-09-20T03:01:37.828Z (8 days ago)
- Topics: browser, esbuild, esm, markdown, web-component
- Language: JavaScript
- Homepage:
- Size: 1.28 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
About
=====
Web-component to load an external markdown file (.md) and render it into sanitized HTML.
- Syntax highlighting
- Table of contents
- Copy code to clipboard
- Light DOM CSS styling
- Optional JavaScript API
📦 Scoped `@xan105` packages are for my own personal use but feel free to use them.
[](https://www.webcomponents.org/element/@xan105/markdown)
Example
=======
Import and define the Web-component:
```js
import { Markdown } from "/path/to/md.js"
customElements.define("mark-down", Markdown);
```
HTML:
```html
```
Optional JavaScript API:
```js
const el = document.querySelector("mark-down");
el.addEventListener("load", ()=>{
console.log("loading...");
});
el.addEventListener("success", ()=>{
console.log("ok");
});
el.addEventListener("failure", ({detail})=>{
console.error(detail.error);
});
//auto rendering (default)
el.integrity = "sha384-0xABCD...";
el.src = "/path/to/md";
//manual rendering
el.manual = true;
el.src = "/path/to/md";
el.render().catch((err)=>{
console.error(err);
});
//Table of contents
querySelector("#toc").innerHTML = el.headings.toHTML({ depth: 4 });
el.addEventListener("intersect", ({detail})=>{
//Do something when a heading (h1, h2, ...) has entered the top of the viewport
querySelector(`#toc a[href="#${detail.id}"]`).classList.add("active");
});
```
Install
=======
```
npm i @xan105/markdown
```
💡 The bundled library and its minified version can be found in the `./dist` folder.
### Via importmap
Create an importmap and add it to your html:
```html
{
"imports": {
"@xan105/markdown": "./path/to/node_modules/@xan105/markdown/dist/md.min.js"
}
}