Saturday 2 August 2014

How to Beautify your code snippet and implement in Blogger


If you are writing technical blogs, sometimes you have to give some sample programs. Few ways are there to beautify your code snippet one is attaching Gist code into your blogger(How to include your gist code snippet into your blogger). Other turn around is, i am going to explain in this blog post.

I am working on Ruby on Rails, so most of my tech articles based on either Ruby or Rails side only. So if the users are coming to my site, if they are looking any code snippets if language based and highlighted means, its very easy to understand. So that purpose we have make beautify our code snippets. Here is very less steps to follow to make your code as beautify with language specific.

1) Goto Hillite.me website.
2) In "source code" text box, just enter your code which you want to display in your posts.
3) Select "Language" dropdown, which language is for your code snippet.
4) Select "Style" dropdown, which style you want. There is plenty of style options are there. I personally prefer "monokai".
5) Select "Line Numbers" check box if your code snippet with line numbers (Optional only). Otherwise dont select.
6) In CSS text box, just enter the color of border and spacing stuff( Probably you no need to modify anything, default style itself is fine).
7) Yes you are almost done. Just you need to click the button called "Highlight!".
8) You can see Preview immediately. If any further changes you need just modify and click "Highlight!" button again.
9) Copy  auto generated code from "HTML" text box. Below is the snapshot i have attached from the website of "Hillite.me" for your reference.

Screenshot from hillite.me



















Here is the complete output after you complete above steps.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  def index
    @posts = Post.all.to_a
  end

  def show
  end

  def new
    @post = Post.new
  end

  def edit
  end

  def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: 'Post was successfully created.' }
        format.json { render action: 'show', status: :created, location: @post }
      else
        format.html { render action: 'new' }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  def update
    respond_to do |format|
      if @post.update(post_params)
        format.html { redirect_to @post, notice: 'Post was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render action: 'edit' }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

  def destroy
    @post.destroy
    respond_to do |format|
      format.html { redirect_to posts_url }
      format.json { head :no_content }
    end
  end

  private
    def set_post
      @post = Post.find(params[:id])
    end

    def post_params
      params.require(:post).permit(:title, :description)
    end
end

1 comment :