[{"data":1,"prerenderedAt":50},["Reactive",2],{"blog-post-javascript-markdown-example":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":27,"related":28},"javascript-markdown-example","Javascript Markdown Parsing with Markdown-it: A Guide","Discover how to parse and generate markdown in Javascript using Markdown-it, with practical examples for easy markdown-to-HTML conversion.","Markdown, a lightweight markup language with plain text formatting syntax, has gained immense popularity due to its ease of use and broad compatibility. This article will guide you on how to parse…","2024-04-26","Tutorial","Matthew Rathbone","Javascript markdown example",2,"\u003Cp>Markdown, a lightweight markup language with plain text formatting syntax, has gained immense popularity due to its ease of use and broad compatibility. This article will guide you on how to parse and generate markdown documents in Javascript. We chiefly use a powerful Javascript package known as Markdown-it for our examples.\u003C/p>\n\u003Ch2 id=\"preliminary-concepts\">\u003Cstrong>Preliminary Concepts\u003C/strong>\u003C/h2>\n\u003Cp>Markdown consists of a collection of symbols and characters that represent tags in HTML. For instance, to make a word bold in markdown, you can wrap it inside double asterisks or double underscores as \u003Ccode>**bold word**\u003C/code> or \u003Ccode>__bold word__\u003C/code>. This markdown is equivalent to the following HTML: \u003Ccode><strong>bold word</strong>\u003C/code>.\u003C/p>\n\u003Cp>Markdown makes documentation simpler. Instead of manually crafting HTML tags, you can use the easy-to-remember markdown syntax. Most importantly, you can read markdown documents without any rendering, making it extremely accessible.\u003C/p>\n\u003Ch2 id=\"markdown-in-javascript\">\u003Cstrong>Markdown in Javascript\u003C/strong>\u003C/h2>\n\u003Cp>In JavaScript, there are several libraries available to parse markdown text and generate HTML outputs. Our focus will be on the popular \u003Ccode>markdown-it\u003C/code> library, which parses markdown text in JavaScript and outputs HTML text.\u003C/p>\n\u003Cp>To use \u003Ccode>markdown-it\u003C/code>, you will first need to install it using npm:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">npm install markdown-it --save\n\u003C/code>\u003C/pre>\u003Ch2 id=\"examples-with-markdown-it\">\u003Cstrong>Examples with Markdown-it\u003C/strong>\u003C/h2>\n\u003Cp>Let's work on real-life examples of using \u003Ccode>markdown-it\u003C/code>. This section covers the core implementation details.\u003C/p>\n\u003Ch3 id=\"basic-usage\">\u003Cem>\u003Cstrong>Basic Usage\u003C/strong>\u003C/em>\u003C/h3>\n\u003Cp>After installing \u003Ccode>markdown-it\u003C/code>, require it in your file and create an instance of \u003Ccode>markdown-it\u003C/code>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownIt\u003C/span> = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-it'\u003C/span>)\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> md = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownIt\u003C/span>()\n\u003C/code>\u003C/pre>\u003Cp>Now, to convert any markdown string to HTML, just pass the markdown string to the instance's \u003Ccode>.render\u003C/code> method:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownText = \u003Cspan class=\"hljs-string\">'**Hello, world!**'\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlText = md.\u003Cspan class=\"hljs-title function_\">render\u003C/span>(markdownText)\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(htmlText)\n\u003C/code>\u003C/pre>\u003Cp>The output should be:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Hello, world!\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-usage\">\u003Cem>\u003Cstrong>Advanced Usage\u003C/strong>\u003C/em>\u003C/h3>\n\u003Cp>\u003Ccode>markdown-it\u003C/code> provides several options for configuring the markdown parser. For example, you can add HTML support (disabled by default) by passing an options object:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">const\u003C/span> md = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownIt\u003C/span>({\u003Cspan class=\"hljs-attr\">html\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>})\n\u003C/code>\u003C/pre>\u003Cp>Now, the parser will pass through any HTML tags included in the markdown text:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownText = \u003Cspan class=\"hljs-string\">'<span style="color:red">**Hello, world!**</span>'\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlText = md.\u003Cspan class=\"hljs-title function_\">render\u003C/span>(markdownText)\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(htmlText)\n\u003C/code>\u003C/pre>\u003Cp>The output should be:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"color:red"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Hello, world!\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"adding-plugins-to-markdown-it\">\u003Cem>\u003Cstrong>Adding Plugins to \u003Ccode>markdown-it\u003C/code>\u003C/strong>\u003C/em>\u003C/h3>\n\u003Cp>\u003Ccode>markdown-it\u003C/code> supports plugins, allowing you to extend its features. A commonly used plugin is \u003Ccode>markdown-it-anchor\u003C/code>, which adds anchor headings to the generated HTML. To install and use it:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">npm install markdown-it-anchor --save\n\u003C/code>\u003C/pre>\u003Cp>Then, require and use it in your file:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownIt\u003C/span> = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-it'\u003C/span>)\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownItAnchor = \u003Cspan class=\"hljs-built_in\">require\u003C/span>(\u003Cspan class=\"hljs-string\">'markdown-it-anchor'\u003C/span>)\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> md = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownIt\u003C/span>().\u003Cspan class=\"hljs-title function_\">use\u003C/span>(markdownItAnchor)\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> markdownText = \u003Cspan class=\"hljs-string\">'# Hello, world!'\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> htmlText = md.\u003Cspan class=\"hljs-title function_\">render\u003C/span>(markdownText)\n\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(htmlText)\n\u003C/code>\u003C/pre>\u003Cp>The output should be:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"hello-world"\u003C/span>>\u003C/span>Hello, world!\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">\u003Cstrong>Conclusion\u003C/strong>\u003C/h2>\n\u003Cp>In this blog post, we explored how to incorporate and use markdown parsing in Javascript using \u003Ccode>markdown-it\u003C/code>. This allows for simple markdown-to-HTML conversions, making the generation of formatted text effortless. With its ability to accept plugins, \u003Ccode>markdown-it\u003C/code> is highly versatile and can tackle any markdown-related tasks.\u003C/p>\n\u003Cp>Remember, the power of markdown is to write and read documents easily, and JavaScript libraries like \u003Ccode>markdown-it\u003C/code> make it possible to use this power anywhere on the web. Enjoy writing!\u003C/p>\n",[15,18,21,24],{"id":16,"text":17,"level":12},"preliminary-concepts","Preliminary Concepts",{"id":19,"text":20,"level":12},"markdown-in-javascript","Markdown in Javascript",{"id":22,"text":23,"level":12},"examples-with-markdown-it","Examples with Markdown-it",{"id":25,"text":26,"level":12},"conclusion","Conclusion",[],[29,36,43],{"slug":30,"title":31,"description":32,"excerpt":33,"date":34,"category":9,"author":10,"keywords":35,"readingMinutes":12},"swift-markdown-parsing","Swift Markdown Parsing: How to Guide & Examples","Learn to parse Markdown in Swift using SwiftMarkdown. This tutorial provides examples for converting Markdown to HTML and customization.","As Swift becomes increasingly ubiquitous in iOS development, we often find ourselves needing to process different kinds of text data. Today, we'll focus on a popular plaintext markup language:…","2024-07-23","Swift markdown parsing",{"slug":37,"title":38,"description":39,"excerpt":40,"date":41,"category":9,"author":10,"keywords":42,"readingMinutes":12},"flutter-markdown-parsing","Flutter Markdown Parsing Tutorial","Learn to parse Markdown in Flutter with the `flutter_markdown` library. This tutorial covers setup, implementation, and customization.","This tutorial aims to demonstrate how to parse Markdown content in the Flutter framework. We will utilize the fluttermarkdown library which wraps around the Dart package markdown to translate…","2024-07-20","Flutter markdown parsing",{"slug":44,"title":45,"description":46,"excerpt":47,"date":48,"category":9,"author":10,"keywords":49,"readingMinutes":12},"java-markdown-example","Java Markdown Parsing Guide with Examples","Learn how to parse Markdown in Java. Includes setup for 'flexmark-java' and examples of Markdown syntaxes.","Writing in plain text has its own charm, but what if you could format your text without using complex editors or software? Enter Markdown, a language designed to enhance plain text formatting…","2024-05-01","Java markdown example",1792184940267]