Prettyin' up code for your blog the easy way, using GitHub Gists!
When I first started writing this blog, I had no idea how to format my code so that it looked decent, so I would just take screenshots of my code in Sublime, or even while it was still in irb. I had read a lot of other code blogs and noticed that other people's code could be copied and pasted - obviously they were not screenshots! I had to figure this out.
There are many ways to pretty up your code snippets, but my favorite is to simply put my code in a GitHub Gist and copy-paste the code provided all the way on the right where it says "embed," like so:
Then it looks all nice and pretty on your blog, like so:
If you're using Tumblr (as I am, currently anyway) you can also just place your raw code between a couple of <pre class="language-ruby"></pre> tags (obviously switch out "ruby" for the language of your choice if it's not Ruby). It mostly looks fine, just black and white. However, if the code is wider than your blog it might just continue off the side of your post (unlike the GitHub Gist, which has a built-in scroll bar).
It looks like this:
class TriangleError < Exception end class Triangle attr_accessor :equilateral, :isosceles, :scalene def initialize(side1,side2,side3) @side1 = side1 @side2 = side2 @side3 = side3 end def kind if @side1 == 0 || @side2 == 0 || @side3 == 0 raise TriangleError elsif @side1 <= 0 || @side2 <= 0 || @side3 <= 0 raise TriangleError elsif (@side1 + @side2) <= @side3 raise TriangleError elsif (@side2 + @side3) <= @side1 raise TriangleError elsif (@side1 + @side3) <= @side2 raise TriangleError elsif @side1 == @side2 && @side2 == @side3 :equilateral elsif @side1 == @side2 || @side1 == @side3 || @side2 == @side3 :isosceles else :scalene end end end
Personally, I think the embedded Gist is much more aesthetically pleasing, so that's my preferred method to post code. But, if you Google around you can find many different methods other than the ones I listed here, so feel free to do a little searching of your own and see what you can find!









