markdown-pro
Advanced tools
Markdown Pro - the lightest markdown parser.
npm i markdown-pro
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);
Use ./flow-typed/markdown-pro.js.
# 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>
some text -> <p>some text</p>
**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>
--- -> <hr/>
*** -> <hr/>
___ -> <hr/>
25^th^ -> 25<sup>th</sup>
C~2~H~5~OH -> C<sub>2</sub>H<sub>5</sub>OH
 -> <img src="https://placekitten.com/100/100"/>
 -> <img src="https://placekitten.com/110/110" alt="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  inline -> Image <img src="https://placekitten.com/100/25"/> inline
// 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
[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>
[send a email](my-email@example.com) -> <a href="mailto:my-email@example.com">send a email</a>
[](my-email@example.com "send a email") -> <a href="mailto:my-email@example.com" title="send a email">my-email@example.com</a>
[send a email](my-email@example.com "send a email") -> <a href="mailto:my-email@example.com" title="send a email">send a email</a>
[email and subject](my-email@example.com "Link title" "Email subject") -> <a href="mailto:my-email@example.com?subject=Email subject" title="Link title">email and subject</a>
[](my-email@example.com) -> <a href="mailto:my-email@example.com">my-email@example.com</a>
// parse email, configurable
my-email@example.com -> <a href="mailto:my-email@example.com">my-email@example.com</a>
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>
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>
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>
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>
> Markdown-pro -> <blockquote>Markdown-pro</blockquote>
```bash -> <code data-lang="bash">
$ npm i markdown-pro -> $ npm i markdown-pro
$ sudo be happy -> $ sudo be happy
``` -> </code>[image-variable]: https://placekitten.com/100/100
[url variable]: http://example.com
[email variable]: email@example.com
![][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@example.com">send email</a>
See license.
FAQs
Markdown Pro - the lightest markdown parser
The npm package markdown-pro receives a total of 179 weekly downloads. As such, markdown-pro popularity was classified as not popular.
We found that markdown-pro demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.