> ## Content Index
> Fetch the complete content index at: https://blog.lsonline.fr/llms.txt
> Use this file to discover other available public pages before exploring further.

# Display Markdown to your Bot Framework Hero and Thumbnail Cards💡
- URL: https://blog.lsonline.fr/2019/04/10/display-markdown-to-your-bot-framework-hero-and-thumbnail-cards/
- Published: 2019-04-10T03:41:29.000Z
- Updated: 2026-01-27T18:49:06.000Z
- Description: Markdown allows you to format text content. Here is a solution that allows you to use Markdown into your thumbnailCards and heroCards of your Bot
- Author: Laurent Sittler
- Tags: Bot, Development, Microsoft Teams, Getting Started

I recently had the opportunity to really develop a Bot based on [Microsoft Bot Framework](https://dev.botframework.com/?ref=blog.lsonline.fr) that could work on [Microsoft Teams](https://products.office.com/en-us/microsoft-teams/group-chat-software?ref=blog.lsonline.fr). Without speaking about some aspects and technical choices, the principle of this Bot is simply to try to answer the questions of users asked on detailed thematics (Nothing too complex, you may say).

> \[note\]**Note**  
>  
> 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](https://www.markdownguide.org/?ref=blog.lsonline.fr). Everything is fine when the content is directly sent a message:

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

```

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

![](https://blog.lsonline.fr/content/images/2019/04/LsOnline-Bot-Msg-MarkdownFormatted.jpg)

Markdown message sent from the bot

The following idea is to format the answers thanks to [CardFactory](https://docs.microsoft.com/en-us/javascript/api/botbuilder-core/cardfactory?view=botbuilder-ts-latest&ref=blog.lsonline.fr) (add some actions, title, or whatever...)

```javascript
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 😑

![](https://blog.lsonline.fr/content/images/2019/04/LsOnline-Bot-thumbnailCard-Markdown-sample.jpg)

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-WebChatHi, 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![](https://github.githubassets.com/favicon.ico)GitHubmicrosoft![](https://avatars2.githubusercontent.com/u/6154722?s=400&v=4)](https://github.com/Microsoft/BotFramework-WebChat/issues/356?ref=blog.lsonline.fr)

The conclusion is (currently): HeroCards and ThumbnailsCard do not support the Markdown 😕.

During my research, I have realized that HTML-rich text works! Great news, I can call all of my teammates and ask them to rewrite all documentation in HTML... Bad story. Finally, I also said to myself that may be possible to convert the Markdown content to HTML?

Eureka! I found a Framework named [**showdown**](https://github.com/showdownjs/showdown?ref=blog.lsonline.fr) 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 to you how I used it.

First, install the package to your solution:

```bash
npm i showdown --save
```

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

```JavaScript
const showdown = require('showdown');

[...]

let converter = new showdown.Converter();
```

Convert your Markdown text to HTML:

```JavaScript
converter.makeHtml('# Markdown \n\n > Do you see me?')
```

![](https://blog.lsonline.fr/content/images/2019/04/LsOnline-Bot-thumbnailCard-Markdown-showdown-1.jpg)

Example of thumbnail card with Markdown content

The full code of my function is the following one:

```JavaScript
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 🚀