Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/webbestmaster/markdown-pro

Markdown Pro - the lightest markdown parser
https://github.com/webbestmaster/markdown-pro
Last synced: 3 months ago
JSON representation
Markdown Pro - the lightest markdown parser
Host: GitHub
URL: https://github.com/webbestmaster/markdown-pro
Owner: webbestmaster
License: mit
Created: 2020-06-10T11:16:33.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-07-06T14:49:36.000Z (7 months ago)
Last Synced: 2024-08-08T16:14:32.643Z (6 months ago)
Language: TypeScript
Homepage: https://webbestmaster.github.io/markdown-pro/
Size: 716 KB
Stars: 8
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project

README

        # Markdown Pro

[![GitHub license](https://img.shields.io/npm/l/markdown-pro)](https://github.com/webbestmaster/markdown-pro/blob/master/license)

[![codecov](https://codecov.io/gh/webbestmaster/markdown-pro/branch/master/graph/badge.svg)](https://codecov.io/gh/webbestmaster/markdown-pro)

[![npm version](https://img.shields.io/npm/v/markdown-pro.svg)](https://www.npmjs.com/package/markdown-pro)

[![Known Vulnerabilities](https://snyk.io/test/github/webbestmaster/markdown-pro/badge.svg)](https://snyk.io/test/github/webbestmaster/markdown-pro)

[![Dependency count](https://badgen.net/bundlephobia/dependency-count/markdown-pro)](https://libraries.io/npm/markdown-pro)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/markdown-pro)](https://bundlephobia.com/package/markdown-pro)

[![nodejs version](https://img.shields.io/node/v/markdown-pro)](https://nodejs.org/en/docs)

[![Github CI](https://github.com/webbestmaster/markdown-pro/actions/workflows/github-ci.yml/badge.svg)](https://github.com/webbestmaster/markdown-pro/actions/workflows/github-ci.yml)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/webbestmaster/markdown-pro/github-ci.yml)](https://github.com/webbestmaster/markdown-pro/actions/workflows/github-ci.yml)

[![Type definitions](https://img.shields.io/npm/types/markdown-pro)](https://www.typescriptlang.org)

[![Website](https://img.shields.io/website?url=https://webbestmaster.github.io/markdown-pro)](https://webbestmaster.github.io/markdown-pro)

[![CodeFactor](https://www.codefactor.io/repository/github/webbestmaster/markdown-pro/badge)](https://www.codefactor.io/repository/github/webbestmaster/markdown-pro)

[![Package Quality](https://packagequality.com/shield/markdown-pro.svg)](https://packagequality.com/#?package=markdown-pro)

[![GitHub stars](https://img.shields.io/github/stars/webbestmaster/markdown-pro?style=social)](https://github.com/webbestmaster/markdown-pro)

Markdown Pro - the lightest markdown parser.

**[Live demo](https://webbestmaster.github.io/markdown-pro)**

## Install

```bash

npm i markdown-pro

```

## Usage examples

```javascript

import markdownPro, {ThemeNameEnum, classNameMdPro, classNameMdProThemeLight, classNameMdProThemeDark} from 'markdown-pro';

// import styles

import 'markdown-pro/dist/style.css';

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


const config = {

    // convert '\n' into 
, default: false, optional

    useLineBreak: true,

    // add css class into wrapper, default: '', optional

    wrapperClassName: 'my-markdown-pro',

    // https://exmaple.com -> https://exmaple.com, default: true, optional

    parseLink: true,

    // langNme: string, code: string, optional

    codeHighlight: function (langNme, code) {

        return yourHighlightFunction(langNme, code);

    },

    // use wrapper 
..., 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

```html

# Header 1       ->  
Header 1

## Header 2      ->  Header 2

### Header 3     ->  Header 3

#### Header 4    ->  Header 4

##### Header 5   ->  Header 5

###### Header 6  ->  Header 6

```

#### Paragraph

```html

some text -> 
some text

```

#### Emphasis

```html

**This is bold text**               ->  This is bold text

__This is underline text__          ->  This is underline text

_This is italic text_               ->  This is italic text

*This is italic text __too__*       ->  This is italic text too

***This is bold and italic text***  ->  This is bold and italic text

~~This is strikethrough text~~      ->  This is strikethrough text

```

#### Lines

```html

---  ->  


***  ->  

___  ->  

```

#### Subscript/Superscript

```html

25^th^      ->  25^th

C~2~H~5~OH  ->  C₂H₅OH

```

#### Images

```html

![](https://placekitten.com/100/100)                                        ->  

![Cat](https://placekitten.com/110/110)                                     ->  

![Cat](https://placekitten.com/120/120 "The cat")                           ->  

![Cat](https://placekitten.com/120/120 "The cat" your-attribute="my value") ->  

Image ![](https://placekitten.com/100/25) inline                            ->  Image  inline

```

#### Checkboxes

```html

// big "X" to check checkbox

[X] checked    ->   checked

// small "x" to check checkbox

[x] checked    ->   checked

// single space (" ") to uncheck checkbox

[ ] unchecked  ->   unchecked

```

#### Links

```html

[the site](http://example.com)               ->  the site

[](http://example.com)                       ->  http://example.com

[](http://example.com "go to site")          ->  http://example.com

[the site](http://example.com "go to site")  ->  the site

// parse link, configurable

http://example.com                           ->  http://example.com

```

#### Emails

```html

[send a email]([email protected])                                    ->  send a email

[]([email protected] "send a email")                                 ->  [email protected]

[send a email]([email protected] "send a email")                     ->  send a email

[email and subject]([email protected] "Link title" "Email subject")  ->  email and subject

[]([email protected])                                                ->  [email protected]

// parse email, configurable

[email protected]                                                    ->  [email protected]

```

#### 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:

```html



    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

        

    



```

### 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:

```html



    Create a Numeric list

    by starting a line with

    any number(s) with a dot, for example: 1.







    Create a Big Alphabet list

    by starting a line with

    any Big Letter(s) with a dot, for example: A.



    PS: avoid Roman number - I, V, X, L, C, D, M





    The same rule

    for Small Alphabet list

    PS: avoid Roman number - i, v, x, l, c, d, m





    Create a Big Roman Number list

    by starting a line with

    any Big Roman Number(s) with a dot, for example: I.







    The same rule

    for Small Roman Number list



```

### Table

Markdown:

```

| Left | Center | Right  |

| :--- | :----: | -----: |

| beep | 123    | abc    |

| boop | 456    | def    |

```

Html:

```html

    

        

            Left

            Center

            Right

        

    

    

        

            beep

            123

            abc

        

        

            boop

            456

            def

        

    

```

### Footnote

Markdown:

```

Footnote 1 link[^first].

Inline footnote^[Text of inline footnote] definition.

[^first]: Footnote definition.

```

Html:

```html

Footnote 1 link^[1].


Inline footnote^[2] definition.






    

        Footnote definition.

    

    

        Text of inline footnote

    



```

#### Blockquote

```html

> Markdown-pro  ->  
Markdown-pro

```

#### Code

```bash                 ->  <code data-lang="bash">

$ npm i markdown-pro    ->  $ npm i markdown-pro

$ sudo be happy         ->  $ sudo be happy

```                     ->  </code>


### Variables

```html

[image-variable]: https://placekitten.com/100/100

[url variable]: http://example.com

[email variable]: [email protected]

![][image-variable]           ->  

![cat][image-variable]        ->  

[][url variable]              ->  http://example.com

[to site][url variable]       ->  to site

[send email][email variable]  ->  send email

```

## License

See [license](license).