Skip to content

bhuvana-guna/js-markdown-formatter

Repository files navigation

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](?=\\$[\\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

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

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published