[{"data":1,"prerenderedAt":50},["Reactive",2],{"blog-post-ruby-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":33,"related":34},"ruby-markdown-example","A Quick Guide To Markdown in Ruby Using Kramdown","A comprehensive guide to using Ruby for Markdown usage. Learn to convert Markdown to HTML in Ruby with hands-on examples.","In today's programming environment, it's vital to understand how to make sense of Markdown, a lightweight markup language that simplifies the writing of web-based content. This guide will walk you…","2024-05-06","Tutorial","Matthew Rathbone","Ruby markdown example",2,"\u003Cp>In today's programming environment, it's vital to understand how to make sense of Markdown, a lightweight markup language that simplifies the writing of web-based content. This guide will walk you through using Markdown in Ruby, one of the most popular high-level programming languages. Our goal here is to help software engineers exploring Markdown in Ruby yield more power in generating and manipulating web content.\u003C/p>\n\u003Ch2 id=\"table-of-contents\">Table of Contents\u003C/h2>\n\u003Col>\n\u003Cli>\u003Ca href=\"#prerequisite\">Prerequisite\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#understanding-markdown\">Understanding Markdown\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#markdown-usage-in-ruby\">Markdown Usage in Ruby\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#hands-on-ruby-markdown-examples\">Hands-On Ruby Markdown Examples\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#final-thoughts\">Final Thoughts\u003C/a>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"prerequisite\">Prerequisite\u003C/h2>\n\u003Cp>Before getting started, let's ensure you have Ruby installed. You can ascertain this by running this command in your command line:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">ruby -v\n\u003C/code>\u003C/pre>\u003Cp>The output should look something like this:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">ruby \u003Cspan class=\"hljs-number\">2.7\u003C/span>.3p183 (\u003Cspan class=\"hljs-number\">2021\u003C/span>-\u003Cspan class=\"hljs-number\">04\u003C/span>-\u003Cspan class=\"hljs-number\">05\u003C/span> revision 6847ee089d) [x86_64-linux]\n\u003C/code>\u003C/pre>\u003Cp>This means you have Ruby version 2.7.3 installed on your machine.\u003C/p>\n\u003Ch2 id=\"understanding-markdown\">Understanding Markdown\u003C/h2>\n\u003Cp>Markdown language uses plain text syntax, allowing the writer to focus on content without being distracted by the formatting. Developers mainly use Markdown to draft readmes, documentation, and content for static site generators.\u003C/p>\n\u003Cp>A typical markdown document might look like this:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Heading 1\u003C/span>\n\u003Cspan class=\"hljs-section\">## Heading 2\u003C/span>\n\u003Cspan class=\"hljs-section\">### Heading 3\u003C/span>\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> Bulleted\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> List\n\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> Numbered\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> List\n\n\u003Cspan class=\"hljs-strong\">**Bold**\u003C/span> and \u003Cspan class=\"hljs-emphasis\">_Italic_\u003C/span> and \u003Cspan class=\"hljs-code\">`Code`\u003C/span> text\n\u003C/code>\u003C/pre>\u003Ch2 id=\"markdown-usage-in-ruby\">Markdown Usage in Ruby\u003C/h2>\n\u003Cp>Ruby has several gems (libraries) that simplify using Markdown. The most popular among these is kramdown, offering a fast and feature-rich conversion from Markdown to HTML.\u003C/p>\n\u003Cp>To get started with kramdown for example, first, install the gem:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">gem install kramdown\n\u003C/code>\u003C/pre>\u003Cp>After the installation, you can use the \u003Ccode>Kramdown::Document\u003C/code> class to convert Markdown to HTML:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">\u003Cspan class=\"hljs-keyword\">require\u003C/span> \u003Cspan class=\"hljs-string\">'kramdown'\u003C/span>\n\nmarkdown = \u003Cspan class=\"hljs-string\">"## Hello, World!"\u003C/span>\nputs \u003Cspan class=\"hljs-title class_\">Kramdown::Document\u003C/span>.new(markdown).to_html\n\u003C/code>\u003C/pre>\u003Cp>Running the above code should output this HTML content:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>Hello, World!\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"hands-on-ruby-markdown-examples\">Hands-On Ruby Markdown Examples\u003C/h2>\n\u003Cp>Now, let's get into examples of using kramdown to convert Markdown content to HTML with Ruby. Note that these examples use the kramdown flavor of Markdown.\u003C/p>\n\u003Cp>\u003Cstrong>Example 1: Basic conversion\u003C/strong>\u003C/p>\n\u003Cp>This is a simple conversion from Markdown to HTML.\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">\u003Cspan class=\"hljs-keyword\">require\u003C/span> \u003Cspan class=\"hljs-string\">'kramdown'\u003C/span>\nmarkdown_text = \u003Cspan class=\"hljs-string\">"# Hello Markdown World\\n This is a **sample** text"\u003C/span>\nhtml = \u003Cspan class=\"hljs-title class_\">Kramdown::Document\u003C/span>.new(markdown_text).to_html\nputs html\n\u003C/code>\u003C/pre>\u003Cp>When you run the above code, you can expect the following output:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>Hello Markdown World\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h1\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>This is a \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>sample\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span> text\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Example 2: Markdown table to HTML\u003C/strong>\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-ruby\">\u003Cspan class=\"hljs-keyword\">require\u003C/span> \u003Cspan class=\"hljs-string\">'kramdown'\u003C/span>\ntable_md = \u003Cspan class=\"hljs-string\">"| First Header | Second Header |\\n| ----- | ---- |\\n| Content from cell 1 | Content from cell 2 |\\n"\u003C/span>\nputs \u003Cspan class=\"hljs-title class_\">Kramdown::Document\u003C/span>.new(table_md).to_html\n\u003C/code>\u003C/pre>\u003Cp>The above code should produce this HTML output:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>First Header\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>Second Header\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Content from cell 1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Content from cell 2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"final-thoughts\">Final Thoughts\u003C/h2>\n\u003Cp>As software engineers, we are constantly seeking tools and practices that make our jobs easier and our work more efficient. Markdown, especially used in conjunction with Ruby, gives us a simple, intuitive way to create structured, web-ready text. With the power of kramdown library, we can convert Markdown to HTML in a breeze, thus enhancing our productivity. Happy coding!\u003C/p>\n",[15,18,21,24,27,30],{"id":16,"text":17,"level":12},"table-of-contents","Table of Contents",{"id":19,"text":20,"level":12},"prerequisite","Prerequisite",{"id":22,"text":23,"level":12},"understanding-markdown","Understanding Markdown",{"id":25,"text":26,"level":12},"markdown-usage-in-ruby","Markdown Usage in Ruby",{"id":28,"text":29,"level":12},"hands-on-ruby-markdown-examples","Hands-On Ruby Markdown Examples",{"id":31,"text":32,"level":12},"final-thoughts","Final Thoughts",[],[35,42],{"slug":36,"title":37,"description":38,"excerpt":38,"date":39,"category":9,"author":40,"keywords":41,"readingMinutes":12},"rendering-markdown-in-ruby-on-rails","Rendering Markdown in Ruby on Rails","Rendering Markdown in Ruby on Rails is a way to display formatted text within a web application. Markdown is a lightweight markup language that allows users to write in a simple, easy-to-read…","2022-12-07","Matthew Rathbone (with help from OpenAI)","6/7/2023",{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-syntax-cheatsheet-quick-reference-complete-guide","Markdown Syntax Cheatsheet and Quick Reference: Complete Guide for Writers and Developers","Master all Markdown syntax with our comprehensive cheatsheet covering basic formatting, advanced features, GitHub Flavored Markdown, and platform-specific extensions. Perfect quick reference for technical writers.","Markdown syntax provides a simple yet powerful way to format text for web content, documentation, and technical writing. This comprehensive cheatsheet serves as your complete quick reference…","2025-10-29","markdown cheatsheet, markdown syntax, markdown reference, markdown quick guide, markdown formatting, github flavored markdown, markdown examples, markdown basics",8,1792184940463]