npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

markdown-pro

v1.1.8

Published

Markdown Pro - the lightest markdown parser

Downloads

619

Readme

Markdown Pro

GitHub license codecov npm version Known Vulnerabilities Dependency count npm bundle size nodejs version Github CI GitHub Workflow Status Type definitions Website CodeFactor Package Quality GitHub stars

Markdown Pro - the lightest markdown parser.

Live demo

Install

npm i markdown-pro

Usage examples

import markdownPro, {ThemeNameEnum, classNameMdPro, classNameMdProThemeLight, classNameMdProThemeDark} from 'markdown-pro';
// import styles
import 'markdown-pro/dist/style.css';

const htmlCode = markdownPro('# Markdown Pro'); // <h1>Markdown Pro</h1>

const config = {
    // convert '\n' into <br/>, default: false, optional
    useLineBreak: true,
    // add css class into wrapper, default: '', optional
    wrapperClassName: 'my-markdown-pro',
    // https://exmaple.com -> <a href="https://exmaple.com">https://exmaple.com</a>, default: true, optional
    parseLink: true,
    // langNme: string, code: string, optional
    codeHighlight: function (langNme, code) {
        return yourHighlightFunction(langNme, code);
    },
    // use wrapper <div class="md-pro">...</div>, default: true, optional
    useWrapper: true,
    // themeName: light | dark | auto, default: auto, optional
    // auto - will use current system theme i.e. light or dark
    // needed class will be added to the wrapper div
    themeName: ThemeNameEnum.auto,
};

const htmlCodeConfigured = markdownPro('# Markdown Pro', config);

Typing Flow

Use ./flow-typed/markdown-pro.js.

Reference

Headers

# Header 1       ->  <h1>Header 1</h1>
## Header 2      ->  <h2>Header 2</h2>
### Header 3     ->  <h3>Header 3</h3>
#### Header 4    ->  <h4>Header 4</h4>
##### Header 5   ->  <h5>Header 5</h5>
###### Header 6  ->  <h6>Header 6</h6>

Paragraph

some text -> <p>some text</p>

Emphasis

**This is bold text**               ->  <b>This is bold text</b>
__This is underline text__          ->  <u>This is underline text</u>
_This is italic text_               ->  <i>This is italic text</i>
*This is italic text __too__*       ->  <i>This is italic text <u>too</u></i>
***This is bold and italic text***  ->  <b><i>This is bold and italic text</i></b>
~~This is strikethrough text~~      ->  <strike>This is strikethrough text</strike>

Lines

---  ->  <hr/>
***  ->  <hr/>
___  ->  <hr/>

Subscript/Superscript

25^th^      ->  25<sup>th</sup>
C~2~H~5~OH  ->  C<sub>2</sub>H<sub>5</sub>OH

Images

![](https://placekitten.com/100/100)                                        ->  <img src="https://placekitten.com/100/100"/>
![Cat](https://placekitten.com/110/110)                                     ->  <img src="https://placekitten.com/110/110" alt="Cat"/>
![Cat](https://placekitten.com/120/120 "The cat")                           ->  <img src="https://placekitten.com/120/120" alt="Cat" title="The cat"/>
![Cat](https://placekitten.com/120/120 "The cat" your-attribute="my value") ->  <img src="https://placekitten.com/120/120" alt="Cat" title="The cat" your-attribute="my value"/>
Image ![](https://placekitten.com/100/25) inline                            ->  Image <img src="https://placekitten.com/100/25"/> inline

Checkboxes

// big "X" to check checkbox
[X] checked    ->  <input type="checkbox" checked="checked" disabled="disabled"/> checked

// small "x" to check checkbox
[x] checked    ->  <input type="checkbox" checked="checked" disabled="disabled"/> checked

// single space (" ") to uncheck checkbox
[ ] unchecked  ->  <input type="checkbox" disabled="disabled"/> unchecked

Links

[the site](http://example.com)               ->  <a href="http://example.com">the site</a>
[](http://example.com)                       ->  <a href="http://example.com">http://example.com</a>
[](http://example.com "go to site")          ->  <a href="http://example.com" title="go to site">http://example.com</a>
[the site](http://example.com "go to site")  ->  <a href="http://example.com" title="go to site">the site</a>

// parse link, configurable
http://example.com                           ->  <a href="http://example.com">http://example.com</a>

Emails

[send a email]([email protected])                                    ->  <a href="mailto:[email protected]">send a email</a>
[]([email protected] "send a email")                                 ->  <a href="mailto:[email protected]" title="send a email">[email protected]</a>
[send a email]([email protected] "send a email")                     ->  <a href="mailto:[email protected]" title="send a email">send a email</a>
[email and subject]([email protected] "Link title" "Email subject")  ->  <a href="mailto:[email protected]?subject=Email subject" title="Link title">email and subject</a>
[]([email protected])                                                ->  <a href="mailto:[email protected]">[email protected]</a>

// parse email, configurable
[email protected]                                                    ->  <a href="mailto:[email protected]">[email protected]</a>

Unordered list

Markdown:

+ Create an unordered list by starting a line with `+`, `-` or `*`
+ Sub-lists are made by indenting space(s):
    + Lorem ipsum dolor
    + Alias animi autem beatae

Html:

<ul>
    <li>Create an unordered list by starting a line with <code data-type="inline">+</code>, <code data-type="inline">-</code> or <code data-type="inline">*</code></li>
    <li>Sub-lists are made by indenting space(s):
        <ul>
            <li>Lorem ipsum dolor</li>
            <li>Alias animi autem beatae</li>
        </ul>
    </li>
</ul>

Ordered lists

Markdown:

5. Create a Numeric list
1. by starting a line with
2. any number(s) with a dot, for example: `1.`

B. Create a Big Alphabet list
O. by starting a line with
P. any Big Letter(s) with a dot, for example: `A.`
Q. PS: avoid Roman number - I, V, X, L, C, D, M

f. The same rule
o. for Small Alphabet list
q. PS: avoid Roman number - i, v, x, l, c, d, m

I. Create a Big Roman Number list
II. by starting a line with
V. any Big Roman Number(s) with a dot, for example: `I.`

ii. The same rule
v. for Small Roman Number list

Html:

<ol type="1" start="5">
    <li>Create a Numeric list</li>
    <li>by starting a line with</li>
    <li>any number(s) with a dot, for example: <code data-type="inline">1.</code></li>
</ol>

<ol type="A" start="B">
    <li>Create a Big Alphabet list</li>
    <li>by starting a line with</li>
    <li>any Big Letter(s) with a dot, for example: <code data-type="inline">A.</code></li>
    <li>PS: avoid Roman number - I, V, X, L, C, D, M</li>
</ol>

<ol type="a" start="f">
    <li>The same rule</li>
    <li>for Small Alphabet list</li>
    <li>PS: avoid Roman number - i, v, x, l, c, d, m</li>
</ol>

<ol type="I" start="I">
    <li>Create a Big Roman Number list</li>
    <li>by starting a line with</li>
    <li>any Big Roman Number(s) with a dot, for example: <code data-type="inline">I.</code></li>
</ol>

<ol type="i" start="ii">
    <li>The same rule</li>
    <li>for Small Roman Number list</li>
</ol>

Table

Markdown:

| Left | Center | Right  |
| :--- | :----: | -----: |
| beep | 123    | abc    |
| boop | 456    | def    |

Html:

<table>
    <thead>
        <tr>
            <th align="left">Left</th>
            <th align="center">Center</th>
            <th align="right">Right</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="left">beep</td>
            <td align="center">123</td>
            <td align="right">abc</td>
        </tr>
        <tr>
            <td align="left">boop</td>
            <td align="center">456</td>
            <td align="right">def</td>
        </tr>
    </tbody>
</table>

Footnote

Markdown:

Footnote 1 link[^first].

Inline footnote^[Text of inline footnote] definition.

[^first]: Footnote definition.

Html:

<p>Footnote 1 link<a href="#first"><sup>[1]</sup></a>.</p>

<p>Inline footnote<a href="#text-of-inline-footnote"><sup>[2]</sup></a> definition.</p>

<hr/>

<ol type="1">
    <li id="first">
        <p>Footnote definition.</p>
    </li>
    <li id="text-of-inline-footnote">
        <p>Text of inline footnote</p>
    </li>
</ol>

Blockquote

> Markdown-pro  ->  <blockquote>Markdown-pro</blockquote>

Code

Variables

[image-variable]: https://placekitten.com/100/100
[url variable]: http://example.com
[email variable]: [email protected]

![][image-variable]           ->  <img loading="lazy" src="https://placekitten.com/100/100"/>
![cat][image-variable]        ->  <img loading="lazy" src="https://placekitten.com/100/100" alt="cat"/>

[][url variable]              ->  <a href="http://example.com">http://example.com</a>
[to site][url variable]       ->  <a href="http://example.com">to site</a>
[send email][email variable]  ->  <a href="mailto:[email protected]">send email</a>

License

See license.