{"id":20189,"date":"2021-08-24T13:05:00","date_gmt":"2021-08-24T13:05:00","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=20189"},"modified":"2024-06-06T06:06:30","modified_gmt":"2024-06-06T06:06:30","slug":"add-markdown-to-rails-app","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/add-markdown-to-rails-app","title":{"rendered":"Markdown Tutorial using Rails App: How to Add Markdown Using Redcarpet and Coderay Gems?"},"content":{"rendered":"<p>Writing blogs with markdown is very helpful and easy as markdown takes care of the look of the content. A markdown support blogging app is quite easy in Ruby on Rails because of the redcarpet gem. If you want to add code in your, another gem coderay will help for syntax highlighting. <\/p>\n<h2>Introduction<\/h2>\n<p>We have seen many blogs having markdown support. We can add links, images, videos, and gifs to any article having markdown support. Thinking about content without worrying about the blog\u2019s presentation makes it easy for bloggers to make great content. In the <b>markdown tutorial using rails app<\/b>, we will implement a blog app to write articles with markdown support. Active Storage is used in Rails to add support for uploading media (images, videos, and gifs) present in your system that we can add in the article. For now, we can add images, videos, or gifs by using their URL (if they are already present on the web).<\/p>\n<h2>Tutorial Goal<\/h2>\n<p>Before implementing the Markdown tutorial using the gems, let\u2019s look at the video and see the output of this tutorial.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/h-fnfuXdBIY\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2>Takeaway: Markdown Tutorial using Rails App<\/h2>\n<ul class=\"bullets text-left\">\n<li>Exploring Redcarpet and Coderay Gems<\/li>\n<li>Adding Markdown to Rails App using gems<\/li>\n<li>Github Repository<\/li>\n<\/ul>\n<p>So, now we are clear about what this <em>Markdown Tutorial using Rails App<\/em> with Redcarpet and Coderay gems will provide us. Let\u2019s get started on its implementation without further ado and learn how to make a blog app with markdown support.<\/p>\n<h2>Initial Setup<\/h2>\n<p>Use the below command to create a new Rails app<\/p>\n<h2>Install Redcarpet and Coderay Gems<\/h2>\n<p>Add following gems in Gemfile. Redcarpet for markdown support and coderay for syntax, highlighting if any code is present in the markdown.<br \/>\nRun bundle install to install the above gems for our application.<\/p>\n<h2>Generate Articles Scaffold<\/h2>\n<p>Generate scaffold for Articles using the following command. Here, we have passed the attributes(columns) added in the Articles table, namely title with string type and content with text type.<\/p>\n<p>After generating the scaffold using the above command, a migration file will also be generated. So, we need to migrate the above changes to update the schema to add an Articles table with the title and content column.<\/p>\n<h2>Update Routes<\/h2>\n<p>Update config\/routes.rb file as following<\/p>\n<h2>Logic to Add Markdown to Rails App<\/h2>\n<p>Now moving further in markdown tutorial using Rails app. Open <strong>app\/helpers\/application_helpers.rb<\/strong> file, add the following code<\/p>\n<p>The above code will parse the markdown present in the content and will render it in the view. To implement that, you need to call the markdown() method present in the above code for the content in the view, shown in the next step. Here, you can always add or remove options according to your need. Read the <a href=\"https:\/\/github.com\/vmg\/redcarpet#and-its-like-really-simple-to-use\" target=\"_blank\" rel=\"noopener\">README.markdown<\/a> file to explore more about markdown options.<\/p>\n<h2>Render Markdown in HTML<\/h2>\n<p>Update the app\/views\/articles\/show.html.erb with the following content<\/p>\n<p><%= markdown(@article.content)%> will call the markdown() function with the content of the article as the parameter that we wrote inside the application_helpers.rb file in the previous section. Once done, we can see the parsed markdown on our view.<\/p>\n<h2>User Interface<\/h2>\n<p>Once you are done with the above code, your UI will look something like this-<\/p>\n<p>The UI will display a list of the articles which you can edit or delete.  You can also add the article by clicking on New Article.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/User-interface-min.jpg\" alt=\"User interface\" width=\"1100\" height=\"980\" class=\"aligncenter size-full wp-image-20198\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/User-interface-min.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/User-interface-min-300x267.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/User-interface-min-1024x912.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/User-interface-min-768x684.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>The UI for adding New Article is shown below-<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1.jpg\" alt=\"Markdown Tutorial\" width=\"1100\" height=\"1090\" class=\"aligncenter size-full wp-image-20199\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1-300x297.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1-1024x1015.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1-150x150.jpg 150w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1-768x761.jpg 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-1-60x60.jpg 60w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>After clicking the button Create Article, the article will be added automatically-<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-2.jpg\" alt=\"Markdown Tutorial\" width=\"1100\" height=\"1054\" class=\"aligncenter size-full wp-image-20200\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-2.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-2-300x287.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-2-1024x981.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/08\/Markdown-Tutorial-2-768x736.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>You can find the entire source code on the Github Repository. Feel free to clone and play around with the code.<\/p>\n<h2>Conclusion<\/h2>\n<p>So, this was a Markdown tutorial providing a step-by-step guide to add Markdown support to the Rails app using Redcarpet and Coderay gems. If you want to explore more about Ruby on Rails, feel free to visit <a href=\"https:\/\/www.bacancytechnology.com\/tutorials\/ruby-on-rails\" target=\"_blank\" rel=\"noopener\">ROR tutorials<\/a>, where we have step-by-step tutorials with github repositories. <\/p>\n<p>We at Bacancy provide you best and skilled developers with fundamental and advanced ROR knowledge. Are you looking for a helping hand for your Rails project? If yes, then without wasting any time, contact us to <a href=\"https:\/\/www.bacancytechnology.com\/ruby-on-rails-development\" target=\"_blank\" rel=\"noopener\">hire ROR developers<\/a>. We assure you of complete satisfaction and optimized solutions for your requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Writing blogs with markdown is very helpful and easy as markdown takes care of the look of the content. A markdown support blogging app is quite easy in Ruby on Rails because of the redcarpet gem. If you want to add code in your, another gem coderay will help for syntax highlighting. Introduction We have [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":20206,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[35],"tags":[],"coauthors":[1664],"class_list":["post-20189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ruby-on-rails"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/20189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=20189"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/20189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/20206"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=20189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=20189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=20189"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}