microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.59k stars 1.53k forks source link

Enable Markdown formatting in Web Chat Channel #5189

Closed ajaylakkegowda closed 4 months ago

ajaylakkegowda commented 4 months ago

I have a question

we tried using plain HTML code and markdown is not working.

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <script>
    </script>
</head>

<body>
    <div id="webchat" role="main"></div>
    <script>    
        const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
        window.WebChat.renderWebChat(
            {
                directLine: window.WebChat.createDirectLine({
                    token: 'IFRAME KEY',
                }),
                renderMarkdown: markdownIt.render.bind(markdownIt),
            },
            document.getElementById('webchat')
        );
    </script>
</body>

</html>

we are getting markdown text as:

test yes no