markdown-pro
v1.1.8
Published
Markdown Pro - the lightest markdown parser
Downloads
619
Maintainers
Readme
Markdown Pro
Markdown Pro - the lightest markdown parser.
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.