5 ways to share your snippets in your blog post

As I write all about web-designing,then obviously I need to share snippets with you all.To showcase the snippet I use a simple block quote,I've customized the block quote in a way that it looks like a script piece however there are a few more ways to do it.So lets see what are some more ways to share your snippets in your blog post.

Block quote

As I told you that the way I showcase my snippets is a simple block quote.Like I have done below.

This is a example of it

However,block quote do not look like above one,they are given to add any quotation,but I'm using it to add snippets.

How to customize a block quote according to snippet?

Well its easy,a snippet have font of monospace and have font size smaller.If you want to make the block quote into a script.Then add the following code in your style.css (for Wordpress users) or paste the following code just before ]]></b:skin>  (for Blogger users).

blockquote{
border: 1px solid #EEEEEE;
word-wrap:break;
background:#f2f2f2;
color: #333;
font-family: "Andale Mono", AndaleMono, monospace;
font-size: 13px;
line-height: 13px;
margin:10px 0;
padding:10px;
}

Use JSfiddle

Well Jsfiddle,is a site that let you create your account and create code snippets.After creating snippets save it and paste the link of the snippet where ever you want to share that code. To use JSfiddle follow the steps below.

• Click on signup on the right top.
• Again click on signup in the text.
• Signup for your account by filling the form.
• Create a new fiddle
• Save it and copy the link.
• Whenever you will update the code,the saved link will not be updated but a new link will be generated so make sure that you do not get confused.

Just share the link with your readers,and let them access the code you created.

CSS Deck

CSS Deck is somehow a tool like JSfiddle but with an amazing new feature that let you share the code with the editor in your blog post.CSS Deck do not require any sign up just create and share it.You have some social sharing option while editor and a link is also given to share your code.

CSS Deck editor let the reader to chnage the code and see the result,but it won't change the original code.To share the CSS Deck with edito on your blog post,follow the steps below.

• Click on new
• Create your script.
• Mouse hover on share and copy the second field which is Embed on your webpage.
• Paste the code in to HTML part of your blog post.

Codepen

Codepen is also a online tool like CSS deck,however this one is a bit functional.It requires sign up and after signing up you can create your pen and share the editor on your blog post like CSS deck but in this case you can customize the editor according to your blog design and even you can upgrade to PRO to get more features like calibration and more.

The advantage of using Codepen is that you can create,edit and share your snippets as well as other users can follow you if you will create fascinating script.To create and share your script follow the steps.

• Click on signup.
• Fill the form or use Github account to sign up.
• Click on New Pen.
• Create your pen and share it.

Use of tag <code>

<code> tag is the older way to showcase your scripts on your blog,it is easy and quick.Just create your script,encode it with HTML encoder because if you will add the tag in HTML part of a blog post then it will show the result of that tag instead of showing the tag.So first create script encode it and then paste the script in the code tag.

Holla,Done !