I recently had the opportunity to really develop a Bot based on Microsoft Bot Framework that sould works on Microsoft Teams. Without speaking about some aspects and technical choices, the principle of this Bot is simply try to answer the questions of users's asked on detailed thematics (Nothing too complex, you may say).

I choose to use the NodeJS solution (because I'm working on MacOS ๐Ÿ˜).

All answers come from various sources and are mostly formatting thanks to Markdown. Everything is fine when the content is directly send as message:

await turnContext.sendActivity(`# Markdown \n\n > Do you see me?`);

The example of code above, send a message to the user formatted in Markdown.

Markdown message sent from the bot

The following idea is to format the answers thanks to CardFactory (add somes actions, title or whatever...) ๐Ÿ’ก๐Ÿ˜ฑ

displayAnswer(answer) {
    return CardFactory.thumbnailCard(
        '', // Title
        [{}], // Image
        [{
            type: ActionTypes.ImBack,
            title: 'Action 01',
            value: 'One'
        },
        {
            type: ActionTypes.ImBack,
            title: 'Action 02',
            value: 'Two'
        }],
    {
        text: `# Markdown \n\n > Do you see me?`
    });
}

The problem is the text is not formatted anymore and the Markdown tags are visible ๐Ÿคฏ

Example from the code above

After some hours of research, I found an issue in GitHub in this regard:

Herocards, Thumbnail cards are not markdown compliant ยท Issue #356 ยท microsoft/BotFramework-WebChat
Hi, As indicated in the title, these objects are not markdown compliant which makes them unsuable with text content. Any clue whether markdown language will be supported? Thanks

The conclusion is (currently): HeroCards and ThumbnailsCard not support the Markdown ๐Ÿคจ.

During my research, I have realised that the HTML rich text works! Great new, I can call all of my teammates and ask them to rewrite all documentations in HTML... Bad story. Finaly, I also said to myself that maybe possible to convert the Markdown content to HTML?

Eureka! I found a Framework named showdown that is "a Javascript Markdown to HTML converter, based on the original works by John Gruber" (John Gruber in addition! ๐Ÿ˜ฏ).

This Framework is awesome and it saved my day... I will explain you how I used it.

First, install the package to your solution:

npm i showdown --save

Next, add the reference and create an object instance of showdown to your target javascript file:

const showdown = require('showdown');

[...]

let converter = new showdown.Converter();

Convert your Markdown text to HTML:

converter.makeHtml('# Markdown \n\n > Do you see me?')
Example of thumbnailCard with Markdown content

The full code of my function is the following one:

displayAnswer(answer) {
    let converter = new showdown.Converter();
    return CardFactory.thumbnailCard(
        '', // Title
        [{}], // Image
        [{
            type: ActionTypes.ImBack,
            title: 'Action 01',
            value: 'One'
        },
        {
            type: ActionTypes.ImBack,
            title: 'Action 02',
            value: 'Two'
        }],
    {
        text: `${converter.makeHtml('# Markdown \n\n > Do you see me?')}`
    });
}

Hoping this post will help you ๐Ÿ˜‰