Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wallpants/pantsdown
Markdown to "GitHub HTML" parser
https://github.com/wallpants/pantsdown
bun css gfm html markdown parser renderer typescript vite
Last synced: 9 days ago
JSON representation
Markdown to "GitHub HTML" parser
- Host: GitHub
- URL: https://github.com/wallpants/pantsdown
- Owner: wallpants
- License: other
- Created: 2023-10-11T17:48:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-01T03:44:59.000Z (about 1 month ago)
- Last Synced: 2024-10-12T05:05:21.185Z (25 days ago)
- Topics: bun, css, gfm, html, markdown, parser, renderer, typescript, vite
- Language: TypeScript
- Homepage: https://wallpants.github.io/pantsdown/
- Size: 1.23 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pantsdown
Pantsdown is a **Markdown** to **HTML** converter. It attempts to render markdown similar to how GitHub does it plus
some features developed specifically for [github-preview.nvim](https://github.com/wallpants/github-preview.nvim).
## [▶️ Demo](https://wallpants.github.io/pantsdown/)
## 📦 Installation
This package is distributed only as a TypeScript module.
This means you'll need a bundler to handle transpilation.
See below for usage examples.
```sh
# bun
bun install pantsdown
# npm
npm install pantsdown
```
## 💻 Usage
🚨 Pantsdown does not sanitize the output HTML. If you are processing potentially unsafe strings,
it's recommended you use a sanitization library like [DOMPurify](https://github.com/cure53/DOMPurify).
### Styles
For styles to be properly applied, either the element containing the generated html or one of its parents
must have the classes `class="pantsdown light"` or `class="pantsdown dark"` added. You can also add
the class `"high-contrast"` to enable high-contrast themes `class="pantsdown dark high-contrast"` or
`class="pantsdown light high-contrast"`.
### [Bun](https://bun.sh/)
Take a look at [how Pantsdown's demo is built](https://github.com/wallpants/pantsdown/blob/main/docs/build.ts)
for a very simple usage example with Bun.
### [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
Create a Vite Project & install dependencies:
```sh
bun create vite my-app --template react-swc-ts
cd my-app
bun install pantsdown
```
Remove CSS from `my-app/src/main.tsx`:
```diff
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
- import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
Replace content in `my-app/src/App.tsx`:
```tsx
import { Pantsdown } from "pantsdown";
import "pantsdown/styles.css";
import { useEffect } from "react";
const pantsdown = new Pantsdown();
function App() {
useEffect(() => {
const container = document.getElementById("markdown-container");
if (!container) return;
const markdown = "# Hello world\n- [ ] Task 1\n- [x] Task 2";
const { html, javascript } = pantsdown.parse(markdown);
container.innerHTML = html;
const newScript = document.createElement("script");
newScript.text = javascript;
container.appendChild(newScript);
}, []);
// ⚠️ for styles to be applied, a parent element must have
// the classes "pantsdown light" or "pantsdown dark" added
return
;
}
export default App;
```
## ⚙️ Configuration
The Pantsdown constructor accepts an optional configuration object.
If you
```typescript
import { Pantsdown, type PartialPantsdownConfig } from "pantsdown";
// This is the default config object. If you provide
// a config object, it will be deeply merged into this.
const config: PartialPantsdownConfig = {
renderer: {
/**
* Prefix to be added to relative image sources.
* Must start and end with "/"
*
* @example
* relativeImageUrlPrefix: "/__localimage__/"
*
* 
* relative src is updated and results in:
* 
*
* 
* absolute src remains unchanged:
* 
*/
relativeImageUrlPrefix: "",
/**
* Whether to render html tags with attribute open=""
*
* @default
* false
*/
detailsTagDefaultOpen: false,
},
};
const pantsdown = new Pantsdown(config);
const html = pantsdown.parse(markdown);
console.log(html);
```
## 🤝 Acknowledgements
Pantsdown is based on [Marked](https://github.com/markedjs/marked). Without their hard work,
Pantsdown would not exist.