|
| 1 | +--- |
| 2 | +title: Use Markdown in Telerik Reporting |
| 3 | +description: "Learn how to use and render markdown content in Telerik Reporting by converting it to HTML, which can be displayed via the HtmlTextBox item." |
| 4 | +type: how-to |
| 5 | +page_title: Using Markdown in Telerik Reporting via HTML Conversion |
| 6 | +meta_title: Using Markdown in Telerik Reporting via HTML Conversion |
| 7 | +slug: rendering-markdown-in-telerik-reporting-templates |
| 8 | +tags: reporting, htmltextbox, markdown, html, azure-devops |
| 9 | +res_type: kb |
| 10 | +ticketid: 1703063 |
| 11 | +--- |
| 12 | + |
| 13 | +## Environment |
| 14 | + |
| 15 | +<table> |
| 16 | + <tbody> |
| 17 | + <tr> |
| 18 | + <td> Product </td> |
| 19 | + <td> Reporting </td> |
| 20 | + </tr> |
| 21 | + </tbody> |
| 22 | +</table> |
| 23 | + |
| 24 | +## Description |
| 25 | + |
| 26 | +I want to use [Markdown](https://en.wikipedia.org/wiki/Markdown) content from Azure DevOps wiki pages in Telerik reports. Markdown is not directly supported in Telerik Reporting, and I need a way to display the content within the report somehow. |
| 27 | + |
| 28 | +## Solution |
| 29 | + |
| 30 | +Telerik Reporting does not have native support for rendering markdown syntax directly. However, you can use the [HtmlTextBox]({%slug telerikreporting/designing-reports/report-structure/htmltextbox/overview%}) report item to display HTML content, which supports a limited set of HTML tags and CSS attributes. Follow these steps: |
| 31 | + |
| 32 | +### Externally Convert to HTML |
| 33 | + |
| 34 | +1. Use an external MD -> HTML converter(e.g. [Convert Markdown to HTML](https://markdowntohtml.com/)) to transform the `MD` content into `HTML`. |
| 35 | +1. Pass the converted HTML content to the [HtmlTextBox]({%slug telerikreporting/designing-reports/report-structure/htmltextbox/overview%}) report item in your Telerik report. |
| 36 | +1. Ensure that the HTML content uses only the [supported HTML tags and CSS attributes]({%slug htmltextbox_formatting_and_styling%}). |
| 37 | + |
| 38 | +### Convert to HTML via User Functions |
| 39 | + |
| 40 | +If the `MD` content cannot be converted to `HTML` beforehand, create a [User Function]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/extending-expressions/user-functions%}) that accepts the Markdown input and returns the corresponding HTML output. You may refer to the sample code below as a guideline. |
| 41 | + |
| 42 | +> To use the `Markdown.ToHtml` function, install the following NuGet package in the project with the user function - [Markdig](https://www.nuget.org/packages/Markdig/0.44.0?_src=template) |
| 43 | +
|
| 44 | +````C# |
| 45 | +namespace UserFunc |
| 46 | +{ |
| 47 | + public class Class1 |
| 48 | + { |
| 49 | + public static string ConvertMarkdownToHtml(string markdown) |
| 50 | + { |
| 51 | + if (string.IsNullOrEmpty(markdown)) |
| 52 | + return string.Empty; |
| 53 | + |
| 54 | + return Markdown.ToHtml(markdown); |
| 55 | + } |
| 56 | + |
| 57 | +```` |
| 58 | + |
| 59 | +- Input: |
| 60 | + |
| 61 | +```` |
| 62 | +# Hello World |
| 63 | + |
| 64 | +This is a **bold** statement, and this is *italic*. |
| 65 | + |
| 66 | +## Features |
| 67 | + |
| 68 | +- Item 1 |
| 69 | +- Item 2 |
| 70 | +- Item 3 |
| 71 | + |
| 72 | +Visit [Google](https://google.com) for more info. |
| 73 | +
|
| 74 | +> This is a blockquote. |
| 75 | + |
| 76 | +--- |
| 77 | + |
| 78 | +Done! |
| 79 | +```` |
| 80 | + |
| 81 | +- Output: |
| 82 | + |
| 83 | +````HTML |
| 84 | +<h1>Hello World</h1> |
| 85 | +<p>This is a <strong>bold</strong> statement and this is <em>italic</em>.</p> |
| 86 | +<h2>Features</h2> |
| 87 | +<ul> |
| 88 | +<li>Item 1</li> |
| 89 | +<li>Item 2</li> |
| 90 | +<li>Item 3</li> |
| 91 | +</ul> |
| 92 | +<p>Visit <a href="https://google.com">Google</a> for more info.</p> |
| 93 | +<blockquote> |
| 94 | +<p>This is a blockquote.</p> |
| 95 | +</blockquote> |
| 96 | +<hr /> |
| 97 | +<p>Done!</p> |
| 98 | +```` |
| 99 | + |
| 100 | +## See Also |
| 101 | + |
| 102 | +* [HtmlTextBox Overview]({%slug telerikreporting/designing-reports/report-structure/htmltextbox/overview%}) |
| 103 | +* [Styling and Formatting the HtmlTextBox Report Item]({%slug htmltextbox_formatting_and_styling%}) |
0 commit comments