starkdown

Starkdown 🦾

Starkdown is a Tiny <2kb Markdown parser written, almost as fast and smart as Tony Stark.

npm i starkdown

Motivation

It is a continuation on a similar package called Snarkdown, which had stopped development at 1kb, but doesn't include basic support for paragraphs, tables, fenced divs, etc.

Starkdown stays around 1.6kb and adds these additional enhancements:

• Paragraphs
• Tables
• Fenced Divs
• Formating done Right

Usage

Starkdown is really easy to use, a single function which parses a string of Markdown and returns a String of HTML. Couldn't be simpler.

import { starkdown } from 'starkdown'

const md = '_This_ is **easy** to `use`.'
const html = starkdown(md)
console.log(html)

The html returned will look like:

<p><em>This</em> is <strong>easy</strong> to <code>use</code>.</p>

Paragraphs

With most Markdown implementations, paragraphs are wrapped in <p> tags. With Starkdown, this is no different.

• All paragraphs and "inline" elements are wrapped in a <p> tags (See List of "inline" elements on MDN)
  • Eg. a standalone image will still be wrapped in a <p> tag, because it's an inline element.
• All non-inline elements will not be wrapped in <p> tags
  • Eg. a table will not be wrapped in a <p> tag.

Check [github](https://github.com)

Img: ![](/some-image.png)

converts to

<p>Check <a href="https://github.com">github</a></p><p>Img: <img src="/some-image.png" alt="" /></p>

But also, when just using images and links:

[github](https://github.com)

![](/some-image.png)

converts to

<p><a href="https://github.com">github</a></p><p><img src="/some-image.png" alt="" /></p>

In contrast, non-inline elements won't get a <p> tag:

### Usage

\`\`\`js
const a = 1
\`\`\`

converts to

<h3>Usage</h3><pre class="code js"><code class="language-js">const a = 1</code></pre>

Tables

| My | Table |

converts to

<table><tr><td>My</td><td>Table</td></tr></table>

Fenced Divs

:::
this is some info
:::

converts to

<div class="fenced "><p>this is some info</p></div>

Or with a custom class.

::: info
this is some info
:::

converts to

<div class="fenced info"><p>this is some info</p></div>

Formating done Right

You need to pad your formatting with spaces in order to correctly convert sentences like these:

snake_case is _so-so_

correctly converts to

<!-- in this library -->
<p>snake_case is <em>so-so</em></p>

<!-- but in Snarkdown... -->
<p>snake<em>case is </em>so-so<em></em></p>

I have greatly simplified the complex logic of Snarkdown and fixed formatting issues like these.

Security

Note on XSS: Starkdown doesn't sanitize HTML. Please bring your own HTML sanitation for any place where user input will be converted into HTML.