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.
This is a example of itHowever,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).
border: 1px solid #EEEEEE;
font-family: "Andale Mono", AndaleMono, monospace;
- 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.
- 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
HTMLpart of your blog post.
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>tag is the older way to showcase your scripts on your blog,it is easy and quick.Just create your script,encode it with
HTMLencoder because if you will add the tag in
HTMLpart 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.