Skip to content

Commit 8af409a

Browse files
github-actions[bot]KB BotIvetNikolovadnikolov-prg
authored
Added new kb article rendering-markdown-in-telerik-reporting-templates (#1922)
* Added new kb article rendering-markdown-in-telerik-reporting-templates * Update rendering-markdown-in-telerik-reporting-templates.md * Update rendering-markdown-in-telerik-reporting-templates.md * Update rendering-markdown-in-telerik-reporting-templates.md * Update rendering-markdown-in-telerik-reporting-templates.md * Update rendering-markdown-in-telerik-reporting-templates.md --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: IvetNikolova <[email protected]> Co-authored-by: Dimitar Nikolov <[email protected]>
1 parent c48ff4b commit 8af409a

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
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

Comments
 (0)