Skip to main content

How to Create Code Snippet

How to Create Code Snippet

It not easy to create a good looking snippet for representing your code. But with few CSS trick it possible.

All you have to do is copy this code in your head tag </head>  or search for <style> an paste it inside your HTML website or Blog.



<style>
.cssterm {
	clear: both;
	box-sizing: border-box;
	position: relative;
	border-radius: 0 0 4px 4px;
	box-shadow: 4px 2px 8px #090909;
	padding: 12px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: ubuntu mono, dejavu sans mono, courier new, Courier, monospace;
	background: #232323;
	background: rgba(9, 9, 9, .9);
	color: #63de00;
	margin-bottom: 1ex;
	title: 'Triple click to select a complete line!';
	max-width: 97%
	}
.cssterm:before {
		display: block;
		position: relative;
		width: 100%;
		left: -12px;
		top: -12px;
		padding: 12px;
		content: "Terminal";
		color: #c9c9c9;
		font-size: smaller;
		font-weight: 700;
		line-height: 4px;
		background: #010101
	}
.cssterm:after {
		display: block;
		content: "";
		position: absolute;
		top: 6px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 1px solid #88070e;
		background-color: #f4343e;
		background: linear-gradient(to bottom, #f7646c, #d00b16);
		right: 8px
	}
.cssterm>*:before {
		display: block;
		content: "";
		position: absolute;
		top: 6px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 1px solid #07880e;
		background-color: #34f43e;
		background: linear-gradient(to bottom, #64f76c, #0bd016);
		right: 32px
	}
.cssterm>*:after {
		display: block;
		content: "";
		position: absolute;
		top: 6px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		border: 1px solid #917608;
		background-color: #f4d03e;
		background: linear-gradient(to bottom, #f7dc6e, #d9b10c);
		right: 56px
	}
</style>

Now in your HTML or Blog where ever you want to add code just add 


<pre class="cssterm" title="Triple click to select a complete line!">
<code>
###############################
# SOME CODE HERE PHP|PYTHON|JAVA|etc...
###############################
</code>
</pre>

Output:- 


# Program to generate a random number between 0 and 9

# importing the random module
import random

print(random.randint(0,9))

Views:

Comments

Post a Comment

Back to Top

Popular posts from this blog

[SOLVED] Google-served ads on screens without publisher-content

Waiting for Approval? And you get a mail something like this? ========================================= Your Publisher ID: pub-123456789 Sign In Thanks for submitting your site "<Your_WebSite.com>" for AdSense. The team has reviewed it but unfortunately your site isn’t ready to show ads at this time. There are some issues which need fixing before your site is ready to show ads. For more information, visit the ' Sites ' page in your account. You can find more details and application tips in the below video : We encourage you to review and update your site. Once you’ve done so, you can request a review. Our specialists will review your site for compliance with our Program policies , so make sure to resolve all of the issues. Watch our ' AdSense Site Approvals ' video series to troubleshoot your policy issues and start earning money from your site. Go to Sites ...
1 comment
Read more

How to get View Count in every single page in blogspot / blogger?

Before we start let me answer some of your following questions that you might be thinking...   Q. What is "View Count" anyways? Ans. With View count you can keep track on how many people have visited your blog site with a total number of counts displayed in your blog. It also gives you a better idea how many people are coming to your blog daily. Q. Blogspot / Blogger already has this feature so what so special about this tutorial? Ans. Yes, I agree blogspot does have this feature and its great no coding involved but you cannot do this... Suppose you have made 2 posts: Page A, Page B. Whatif you want to know how many people visited Page A Vs Page B. Suppose people visited Page A - 100 times and Page B - 5 times. Blogspot View Count will show you only total visits i.e. 105 visits. And not for Page A or Page B specifically.  So to see Views for Each page... this is how to I did. Just copy paste this code on your blogspot page and you are good to go. <!--- //////////...
1 comment
Read more

What is the Limit to Post in Blogspot Per Day?

How many post can you make in blogger per day? Maximum Limit to Post per day for a blogspot user is:-  100 blogspot posts per day If you exceed more then 100 then you will start to get bounce emails that your post has not been delivered. Note:- The limit of 100 is for a "Single Gmail Account Per Day" . Example. If you have 2 blogs using the same account and you have posted 50 post for blog A and 50 post for blog B it will be still counted as 100 collectively .   Views:
Post a Comment
Read more