[{"data":1,"prerenderedAt":26},["Reactive",2],{"blog-post-how-to-render-markdown-in-angular":3},{"slug":4,"title":5,"description":6,"excerpt":6,"date":7,"category":8,"author":9,"keywords":10,"readingMinutes":11,"html":12,"headings":13,"tools":14,"related":15},"how-to-render-markdown-in-angular","How to render Markdown in Angular","Rendering Markdown in Angular can be accomplished using a library such as ngx-markdown. This library allows you to easily convert Markdown code into HTML, which can then be displayed on your…","2023-01-07","Tutorial","Matthew Rathbone (with help from OpenAI)","5/17/2023",2,"\u003Cp>Rendering Markdown in Angular can be accomplished using a library such as \u003Ca href=\"https://github.com/jfcere/ngx-markdown\">ngx-markdown\u003C/a>. This library allows you to easily convert Markdown code into HTML, which can then be displayed on your Angular website or application.\u003C/p>\n\u003Cp>To use ngx-markdown, you will first need to install the library via npm by running the command \u003Ccode>npm install ngx-markdown\u003C/code>. Next, you will need to import the MarkdownModule into your Angular module file.\u003C/p>\n\u003Cp>In the component where you want to display the Markdown content, you will need to import the MarkdownService from the ngx-markdown library. Then, you can use the service's \u003Ccode>compile\u003C/code> method to convert your Markdown code into HTML.\u003C/p>\n\u003Cp>For example, you can create a variable in your component to hold the Markdown code, and then use the \u003Ccode>compile\u003C/code> method to convert it to HTML, which can be displayed on the page using Angular's built-in interpolation.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ts\">\u003Cspan class=\"hljs-keyword\">import\u003C/span> { \u003Cspan class=\"hljs-title class_\">Component\u003C/span> } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'@angular/core'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> { \u003Cspan class=\"hljs-title class_\">MarkdownService\u003C/span> } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'ngx-markdown'\u003C/span>;\n\n\u003Cspan class=\"hljs-meta\">@Component\u003C/span>({\n  \u003Cspan class=\"hljs-attr\">selector\u003C/span>: \u003Cspan class=\"hljs-string\">'app-root'\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">template\u003C/span>: \u003Cspan class=\"hljs-string\">`\n    <div [innerHTML]="html"></div>\n  `\u003C/span>,\n})\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AppComponent\u003C/span> {\n  markdown = \u003Cspan class=\"hljs-string\">'# Hello, world!'\u003C/span>;\n  \u003Cspan class=\"hljs-attr\">html\u003C/span>: \u003Cspan class=\"hljs-built_in\">string\u003C/span>;\n\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003Cspan class=\"hljs-keyword\">private\u003C/span> markdownService: MarkdownService\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">html\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">markdownService\u003C/span>.\u003Cspan class=\"hljs-title function_\">compile\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">markdown\u003C/span>);\n  }\n}\n\u003C/code>\u003C/pre>\u003Cp>In the above example, the markdown variable contains the markdown code and the html variable contains the compiled HTML. The \u003Ccode>compile\u003C/code> method is used to convert the markdown code to html, which is then displayed on the page using Angular's built-in interpolation with the \u003Ccode>[innerHTML]\u003C/code> directive.\u003C/p>\n\u003Cp>Alternatively, you can use the \u003Ccode>markdown\u003C/code> component provided by the ngx-markdown library. This component can take the markdown code as an input, and it will automatically convert it to HTML and display it on the page.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">markdown\u003C/span> [\u003Cspan class=\"hljs-attr\">data\u003C/span>]=\u003Cspan class=\"hljs-string\">"markdown"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">markdown\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>You can also use the \u003Ccode>data\u003C/code> input property to bind the markdown code, or you can use the \u003Ccode>src\u003C/code> input property to load the markdown code from an external file.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">markdown\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"path/to/file.md"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">markdown\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Furthermore, you can also use the \u003Ccode>transform\u003C/code> input property to customize the way the markdown code is converted to HTML. For example, you can use it to add custom CSS classes to the generated HTML elements.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">markdown\u003C/span> [\u003Cspan class=\"hljs-attr\">data\u003C/span>]=\u003Cspan class=\"hljs-string\">"markdown"\u003C/span> [\u003Cspan class=\"hljs-attr\">transform\u003C/span>]=\u003Cspan class=\"hljs-string\">"customTransform"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">markdown\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-ts\">\u003Cspan class=\"hljs-keyword\">import\u003C/span> { \u003Cspan class=\"hljs-title class_\">Component\u003C/span> } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'@angular/core'\u003C/span>;\n\n\u003Cspan class=\"hljs-meta\">@Component\u003C/span>({\n  \u003Cspan class=\"hljs-attr\">selector\u003C/span>: \u003Cspan class=\"hljs-string\">'app-root'\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">template\u003C/span>: \u003Cspan class=\"hljs-string\">`\n    <markdown [data]="markdown" [transform]="customTransform"></markdown>\n  `\u003C/span>,\n})\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AppComponent\u003C/span> {\n  markdown = \u003Cspan class=\"hljs-string\">'# Hello, world!'\u003C/span>;\n\n  \u003Cspan class=\"hljs-title function_\">customTransform\u003C/span>(\u003Cspan class=\"hljs-attr\">html\u003C/span>: \u003Cspan class=\"hljs-built_in\">string\u003C/span>): \u003Cspan class=\"hljs-built_in\">string\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> html.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-string\">'<h1>'\u003C/span>, \u003Cspan class=\"hljs-string\">'<h1 class="custom-class">'\u003C/span>);\n  }\n}\n\u003C/code>\u003C/pre>\u003Cp>In conclusion, rendering Markdown in Angular is a simple process using libraries like ngx-markdown. It provides an easy way to convert markdown\u003C/p>\n",[],[],[16],{"slug":17,"title":18,"description":19,"excerpt":20,"date":21,"category":22,"author":23,"keywords":24,"readingMinutes":25},"markdown-footnotes-across-platforms","Markdown Footnotes Across Platforms: Where They Actually Render","GitHub, GitLab, Obsidian, and this very blog render [^1] footnotes natively — Notion, Slack, Jira, and Confluence don't support them at all. A platform-by-platform reference for where footnote syntax actually works.","Footnote syntax — a reference marker like [^1] in the body text, paired with a definition [^1]: The actual note. elsewhere in the document — looks the same everywhere you write it. Whether it…","2026-09-25","Reference","Matthew Rathbone","markdown footnotes across platforms, github footnotes, gitlab footnotes, notion footnotes, obsidian footnotes support",5,1792184940208]