js-markdown-formatter v1.0.2
js-markdown-formatter
A Customizable Markdown Library for rendering Markdown in Adaptive Cards.
Custom markdown rules for your application is possible now without any regex learning.
Getting started
To use, add the markdown-formatter.js to your html
<script src="https://unpkg.com/js-markdown-formatter"></script>
Then see Usage for futher details
Runnning the example code
Check these files for the sample usage.
example.html - has the basic usage with adaptive cards.
customRegexExample.html - check this file for passing custom regex.
Markdown Patterns Usage
Default Configuration:
- '_italic' will result in '_italic'.
- '**bold' will result in 'bold**'.
- '[Title](link)' will result in Title.
- '- bullet 1\r - bullet2\r - bulltet 3' will result in following way
. bullet 1 . bullet2 . bullet 3
- '1. numbered 1\r 2. numbered2\n 3. numbered 3' will result in following way
1. numbered 1 2. numbered2 3. numbered 3
Custom Configurations:
To replace or to be added with default config.
{ type: 'italic',
styles: [], pattern: '-', patternType: 'symmetric', groups:1, }
The above pattern will render '-italic-' in 'italic'.
{
type: 'bullet', styles: [], pattern: ['\$\s+((.?)\n|\r|(.?)$)'], patternType: 'custom', groups: 1, },
The above pattern will convert 'bullet list $ Item 1.1\r$ Item -2.2-\r$ Item 3\r' in following way:
bullet list . Item 1.1 . Item -2.2- . Item 3
One can create custom markdown based on project need and render it within text.
One can also send the whole regex itself with pattern type custom to have complete control on markdown to apply regex on text and render it
Usage
<script src="https://unpkg.com/js-markdown-formatter"></script>
// use it in onProcessMarkdown of adaptivecard instance.
adaptiveCard.constructor.onProcessMarkdown = function(text, result) {
result.outputHtml = MarkdownFormatter.render(text);
result.didProcess = true;
}
Extra Features: User can also send their custom regex and styles also to apply on text.
//[Optional] user's custom config to be added to default configs
MarkdownFormatter.setCustomMarkdownRegex([{
type: 'bullet', // this will replace the default bullet config with user specified config.
styles:{
start: "<ul>",
end: "</ul>"},
pattern: ['$', '\\r|\\n'],
patternType: 'start-end',
groups: 1
},
{
type: 'italic',
styles:{
start: "<i>",
end: "</i>"},
pattern: ['-'],
patternType: 'symmetric',
groups:1,
}]);
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request