- Read Tutorial
- Watch Guide Video
This is going to be a fun guide. What we have going here is we are going to integrate Markdown. If you're wondering what markdown is. Earlier on in the course we discussed it and did a brief introduction. If you go to say for example your github page and if you look at the readme. Markdown is what we put in the readme to have this type of feature. So you could have bullet points, quotes, you can have code and syntax highlighting all kinds of cool stuff like that.
Right now in our blog if you come to the show page of a blog so say a 'Blog post 8' and say that we put some paragraphs in here. So, if I did something like this if I hit submit everything is still merged together. This is not what we're looking for. If we wanted to do things such as put code snippets, or pictures or anything like that it would not work. What we can do is we can actually implement some gems that are going to allow us to have syntax highlighting. I'm going to come into our gem file here and coming all the way down. Let's add a couple more.
So, we're going to add the gem of redcarpet, then the gem of coderay. I'm also going to take a look at both of these inside of ruby gems. Just to make sure that we're picking up the correct versions. First one is redcarpet. Looking for this you can see that it says it's "A fast and extensible Markdown to '(X)HTML parser'". That is what is going to read through our markdown syntax and render it out. If I click on this you can see we're in version 3.40. Let's come and update redcarpet so it has that. Let's also take a look at coderay. Coderay is a fast and easy syntax highlighting system for selected languages, Ruby being one of the main ones. This is a very cool little gem. In fact, if you go to the Devcamp site and look at any of the written guides. Say you go to a 'Ruby programming' and go to 'Ruby conditionals' scroll down.
The entire Devcamp site. All of these guides are actually written in markdown and I use these two gems the coderay, and the redcarpet gem to allow me to have syntax highlighting, to have headings, to implement pictures, all of that kind of thing. This is a very powerful tool that's going to allow our blogs to look very professional with a limited amount of code. Let's come and grab the correct version of coderay and paste that in. Opening up the terminal let's bundle install. With this all installed we are going to create some helper methods because these gems are going to work and I definitely recommend for you to go take a look at their documentation and see all of the cool things that it provides.
However, I have gone through based off of the work I did with Devcamp and I've written my own wrapper methods that I think you're going to like and you're going to be able to use. Obviously you can customize them however you want but this is what I'm going to use for my own site. Coming down to app/helpers/blogs_helper.rb. Right now we have our gravatar_helper. Let's add a few more items. This is going to be a little bit different.
We're going to do a little bit of metaprogramming here. Where I'm going to actually open up the coderayify class so this is going to be CodeRayify and this is going to inherit from Redcarpet::Render::HTML. If you go through the source code you will find that there is a module here that renders HTML and we're going to override the coderayify syntax in the class so that we can essentially give some customization for whatever language that we want to use.
Here I can say def block_code pass in the (code, language). Now we can use the correct class which is CodeRay.scan(code, language).div. You don't really have to worry about what this is doing as much as just know these are methods that are available inside of the coderay class and they're simply things that we can override and customize. Right here all we're calling and what we're effectively doing is we're giving ourselves the ability to have syntax highlighting.
Here, we're going to go down. Obviously if you're not going to use any code in your files and this part is not necessary you actually already have pretty much everything you need in order to implement the rest of it. This is really focused on the syntax part of it. What we're going to do is implement the markdown method. This is going to take text and this is going to take specifically marked down text and this is what's going to allow it to be parsed into HTML. Because if you think about the flow of this if you come to this site right here the flow that we need is we're going to store all of our text using the markdown format what we need is to take that markdown have it pass through a filter and have that filter convert our markdown down syntax into HTML because we need it to be rendered in HTML.
That's exactly what happens right here in the readme github has this exact same kind of system built into their site. That is what we're building in. Now that we have the start of our markdown let's create a method and we're going to call it 'coderayified'. If you're wondering where I get all the weird names and everything. If you go through their documentation this is exactly what they recommend. We're taking the coderayify class which you may notice is what we already opened up and we added this block code method to it and we're going to instantiate a new version of it and say filter_html: and we want to say true and then hard wrap: true as well. This is simply going to give us the ability to have it so it wraps the HTML in whatever div that it is inside. We also want to have some options for our options.
This is going to be a hash object and here we're going to say fenced and(make sure I spelled fenced correctly, yes) so fenced_code_blocks: true and then no_intra_emphasis: this is going to be true. autolink: is going to be true. Which is a cool little shorthand where you can pass in links and they'll automatically be converted. Then lax_html_blocks: set to true. All of this really just comes down to syntax highlighting and how we want it to set up these are completely optional. I definitely recommend for you to play around with the options and see what works best for you.
Now that we have this let's create another variable we're going to call it markdown_to_html = Redcarpet::Markdown.new(coderayified, options). We're going to take our coderayified variable here which is a class which is an instance of the coderayify class and then we're going to pass in our options hash right here. The last thing we have to do is simply render it. I'm going to say markdown_to_html.render(text).html_safe. We're going to pass in the text. Remember text is the argument we're passing to markdown. Then lastly we just need to say html_safe.
Ok, I know that was a decent amount of code but essentially all we're doing is we are setting up our options for syntax highlighting and for how we want it to work. Technically this would all work if you just left markdown blank and called render(text).html_safe. It would just go with some of the basic items but I want to add these in because I think that they add some cool features. Now that we have this, all we have to do is open up our blog show page and in front of the body, we're just going to call markdown.
Markdown is a method. Technically I could do markdown and wrap it in parens. I'm not just because I think it's cleaner to call it like this. I already have Rails server started. Let's come here and edit. Coming back, now we have these items. Let's put in some other things so let's put in a block quote and say hey I'm in a quote and this is fine. Let's add a heading here and we can say heading and to see if our syntax highlighting is working. Let's say 3 back tics. Now this is the character right below your escape button. I'll say Ruby and def hi_there and just return "hi there" just like a plain little method and three back tics to end that. If I hit submit it looks like that all worked. Look at that.
We now have the ability to add styles to our blog posts so we are using syntax highlighting for anything that we put in back tics. I definitely recommend for you to look even more into the way that you can use syntax highlighting and pass in a name. This is a language name and don't worry about these little things. That's because I have something that helps me write with better grammar called Grammarly and it's pulling those things in.
You won't have those unless you have Grammarly on your system. But right here. This is three back tics, the name of the programming language. When we did our tutorial on markdown before I put in some Javascript and you could do that as well. Our heading right here has the two hashes our paragraphs now have separation and we have the ability to do block quotes, numbers all kinds of good stuff like that.
Great job if you went through that, you now have the ability to write blog posts that have any and all styles that you want. Let's come here close the markdown integration off the list. Coming to the terminal git add, git commit -m "Implemented markdown for blog posts",git push origin final-changes`. We're good to go! In the next guide, we're going to walk through how we can implement breadcrumbs on our blog show page.