Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodneylab/parsedown
WASM code for parsing Markdown into HTML with light output tweaking
https://github.com/rodneylab/parsedown
html5ever markdown markdown-to-html pulldown-cmark rust wasm
Last synced: 5 days ago
JSON representation
WASM code for parsing Markdown into HTML with light output tweaking
- Host: GitHub
- URL: https://github.com/rodneylab/parsedown
- Owner: rodneylab
- License: bsd-3-clause
- Created: 2022-12-17T08:19:24.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-03T12:22:13.000Z (over 1 year ago)
- Last Synced: 2024-04-13T09:06:22.151Z (7 months ago)
- Topics: html5ever, markdown, markdown-to-html, pulldown-cmark, rust, wasm
- Language: Rust
- Homepage:
- Size: 1.35 MB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
parsedown
Light touch Markdown parsing into HTML written in Rust. Generates WASM and can
be used with Deno Fresh.
- adds an id and anchor link to each h2 heading for easy linking
- adds pretty punctuation
- uses html5ever for HTML manipulation and pulldown-cmark for Markdown parsing
## Using Module
The module is hosted on deno.x, and you can import directly into your TypeScript
project (no need to touch WASM or Rust source). See the later sections below if
you want to compile the WASM yourself.
- Parse Markdown to HTML
```typescript
import {
markdownToHtml,
markdownToPlaintext,
mjmlToHtml,
} from "https://deno.land/x/[email protected]/mod.ts";
const { errors, headings, html, statistics } = await markdownToHtml(
`
## 👋🏽 Hello You
* alpha
* beta
`,
{},
);
/*
errors: "undefined"
headings: [{
heading: "👋🏽 Hello You",
id: "wave-skin-tone-4-hello-you",
}]
html: `
👋🏽 Hello You #
- alpha
- beta
`
statistics: {
reading_time: 1, // in minutes
word_count: 4
}
*/
```
```javascript
const { html } = await markdownToHtml(
"Nobody likes maple in their apple flavoured Snapple.",
{ searchTerm: "apple" },
);
html:
`
Nobody likes maple in their apple flavoured Snapple
`;```
Note the `id` added to the first search match. You can use this to scroll the
first match into view.
- Parse Markdown to Plain Text
```typescript
import {
markdownToHtml,
markdownToPlaintext,
mjmlToHtml,
} from "https://deno.land/x/[email protected]/mod.ts";
const plaintext = await markdownToPlaintext(
`
## 👋🏽 Hello You
* alpha
* beta
[Example Link](https://example.com/)
`,
{},
);
/*
plaintext: `👋🏽 Hello You
- alpha
- beta
Example Link (https://example.com/)
`
*/
```
- Parse MJML (email template) to HTML
```typescript
import {
markdownToHtml,
markdownToPlaintext,
mjmlToHtml,
} from "https://deno.land/x/[email protected]/mod.ts";
const html = await mjmlToHtml("");
/*
plaintext: `
#outlook a { padding: 0; }
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
p { display: block; margin: 13px 0; }
`
*/
```
## Compile WASM (see next section instead, if working with Deno)
_Method above is tested with Deno, you only need to compile the WASM yourself if
you have issues in other runtimes or are customizing the Rust source code for
your own needs._
1. Clone the project and change into the project directory. Then run these
commands:
```shell
cargo install wasm-pack # skip if you already have it installed
wasm-pack build --target web
```
2. Copy the generated `pkg` folder into your JavaScript or TypeScript project.
3. Import and use the code in one of your project source files (expected output
is as shown in previous section):
- Parse Markdown to HTML
```typescript
import init, {
markdown_to_html,
markdown_to_plaintext,
mjml_to_html,
} from "pkg/parsedown.js";
await init();
// alternative if top level await is not available
(async () => {
await init();
})();
const { errors, headings, html, statistics } = await markdown_to_html(
`
## 👋🏽 Hello You
* alpha
* beta
`,
{},
);
```
- Parse Markdown to Plain Text
```typescript
import init, {
markdown_to_html,
markdown_to_plaintext,
mjml_to_html,
} from "pkg/parsedown.js";
await init();
const plaintext = markdown_to_plaintext(
`
## 👋🏽 Hello You
* alpha
* beta
[Example Link](https://example.com/)
`,
{},
);
```
- Parse MJML (email template) to HTML
```typescript
import init, {
markdown_to_html,
markdown_to_plaintext,
mjml_to_html,
} from "pkg/parsedown.js";
await init();
const html = await mjml_to_html("");
```
**You must call `init` once before using any of the other functions.**
## Compile WASM in Deno project
If you are working in Deno, you will probably find the `wasmbuild` package
useful.
1. Add a `wasmbuild` task to your `deno.json` file:
```json5
{
"tasks": {
// ...TRUNCATED
"wasmbuild": "deno run -A https://deno.land/x/[email protected]/main.ts"
}
// TRUNCATED...
}
```
2. Run `deno task wasmbuild new` to initialize `wasmbuild` in your project. This
will create a skeleton WASM project with an `rs_lib` directory.
3. Clone this repo and replace the contents of the `rs_lib/src` directory in
your project with the contents of this repo’s `src` directory. Also
replace `rs_lib/Cargo.toml` with `Cargo.toml` from this repo.
4. Run the `deno task wasmbuild` command. This will generate JavaScript code and
WASM modules from the Rust source code. In particular, there should now be
`lib/rs_lib_bg.wasm` and `lib/rs_lib.generated.js` files in your project.
5. You can now use the library functions in your JavaScript or TypeScript code.
Usage is only slightly different from the descriptions above.
- You can import the functions from `lib/rs_lib.generated.js`:
```typescript
import {
instantiate,
markdown_to_html,
markdown_to_plaintext,
mjml_to_html,
} from "@/lib/rs_lib.generated.js";
```
- **Before using any of the functions call `instantiate`**:
```typescript
await instantiate();
```
- The functions will now work as above:
```typescript
const { errors, headings, html, statistics } = await markdown_to_html(
`
## 👋🏽 Hello You
* alpha
* beta
`,
{},
);
const plaintext = markdown_to_plaintext(
`
## 👋🏽 Hello You
* alpha
* beta
[Example Link](https://example.com/)
`,
{},
);
const html = mjml_to_html("");
```
## 🗺️ Roadmap
- add text readability statistics (Gunning Fog index, for example)
## ☎️ Reach Out
Feel free to jump into the
[Rodney Lab matrix chat room](https://matrix.to/#/%23rodney:matrix.org).