New to Kendo UI for jQuery? Download free 30-day trial

Render Chat Messages in Markdown

Environment

Product Version 2021.1.224
Product Progress® Kendo UI® Chat for jQuery

Description

The chat Widget renders Markdown in the 'text' field of a message activity as plain text - it does not convert it to Markdown. I need it to properly render Markdown in messages.

Solution

Kendo UI Chat renders messages as text and HTML only. For the Markdown to be rendered properly in the Kendo UI Chat, it has to be converted to Html first. Use a third-party library of your choice that renders Markdown to Html and include it on the client-side. You can then render the resulting HTML using a Kendo Template.

The example below demonstrates how to implement this using the markdown-js library.

To show the message:

  1. Register a custom message type with the kendo.template and kendo.chat.registerTemplate
  2. In the Template render the Markdown to Html using the third-party library
  3. Show the message using the renderMessage method
<script src="https://unpkg.com/markdown@0.5.0/lib/markdown.js"></script>
<script src="https://unpkg.com/turndown@5.0.3/dist/turndown.js"></script>
</head>
<body>

<div id="chat"></div>
<script>
    var MD_MESSAGE = kendo.template(
      '<div class="k-message">' +
      '<div class="k-bubble">' +
                '#= markdown.toHTML(text, "Maruku") #' +
      '</div>' +
      '</div>'
    );

    kendo.chat.registerTemplate("md_message", MD_MESSAGE);

    $("#chat").kendoChat();

    var chat = $("#chat").data("kendoChat");

    chat.renderMessage({
        type: "md_message",
        text: "*Hello* __MD__ Message [link](http://www.telerik.com)"
    }, {
        id: kendo.guid(),
        name: "Sample Bot",
        iconUrl: "https://demos.telerik.com/kendo-ui/content/chat/InsuranceBot.png"
    });
</script>

See also

In this article