A Customizable Markdown Library for rendering Markdown in Adaptive Cards.
Custom markdown rules for your application is possible now without any regex learning.
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
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.
- '_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
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](?=\\$[\\s]+)|(.*?)$)'], 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
<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,
}]);
- 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