How these stylish syntax highlighters work? What should I know about them?
These all ten code highlighters (when Nov 2013) are created by me using HTML and CSS styling languages. So you don’t need to worry about your blog’s loading speed. Also most CSS codes are working on modern browsers with IE 9+. Therefore it will not damage your site design thoroughly.
Now you might want to know how these syntax highlighters work. I use <pre> HTML elements to nest characters and display them as codes. I designed code highlighters using CSS and so I have to specify an ID for each style. It would like this,
HTML code
<pre id=”ID “>CSS code
Your Text codes go here…
</pre>
#ID {
CSS properties and Values go here…
}
It’s considerable to add once the CSS code to the theme. Then call to CSS script by adding ID to <pre> HTML tag.
As I mentioned in above, you can display many things on source code highlighter. So if you intend to show HTML codes, you have to parse them first. Else it will confuse your website layout. As a blogger user, you can bypass this step easy.
Display HTML codes without Parsing on Blogger
Whenever you want to display HTML codes in a post page (even in the stand-alone page or HTML/JavaScript page element), create a new post and then switch to Compose mode. Now paste the HTML code you want to display. After that switch to HTML mode and then you can find the parsed HTML codes are appearing in the post editor. Now before and after of it, paste the <pre> HTML tag with the ID of certain syntax highlighter style. That’s all.
How to add customized syntax highlighter to Tumblr
1: Login to your Tumblr account.
2: Go to Settings page by clicking on the gear icon on the top of the header.
3: Select your blog to be added the code highlighter(s) from left side bar.
4: Click on ‘Customize’ button under ‘Theme’ section. Then click on ‘Edit HTML’ link in the next screen.
5: Click on theme editor and then press Ctrl + F (in Windows) or Command + F (in Mac). Now by using the inbuilt-searching tool, find below code.
{CustomCSS}
6: Just above of it, paste the CSS code of the syntax highlighter(s) which you wish to install on your Tumblr blog.
7: Last save your theme.
8: You’re almost done. When you want to show some script or text on the customized syntax highlighter, switch to HTML mode in the Text post editor of Tumblr. Now as I explained above, paste the HTML code of syntax highlighter. Make sure you typed the appropriate identification.
How to add Syntax highlighter to Blogger
1: Sign into your Blogger account.
2: Go to Dashboard → Template and click on the "Edit HTML" button.
3: Now find below code in your template.
]]></b:skin>
4: Just before of that code, paste the CSS code of syntax highlighter.
5: Save your Template.
6: You’re done. Like in Tumblr, when you want to show the source code highlighter, paste the HTML code of certain code highlighter.
Syntax Highlighter Styles
Style one
This is first code highlighting style.It has been optimized with
hovering effects and scroll bars.This makes it's more attractive and
compatible to users.So if you want to nest more content into one text
box,this will make that task.
CSS Code
CSS Code
.pbt_coding {
border-top:15px solid #269B9B;
background:#269B9B;
color:#F2F2F2;
padding:10px 13px 8px 13px;
font-size:14px;
overflow:auto;
width:500px;
height:auto;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.pbt_coding:hover {
color:#F2F2F2;
background:#5D6262;
box-shadow:inset 0 0 4px 0;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
HTML
<pre class="pbt_coding">
Scripts/text Goes here...
</pre>
Style Two
CSS Code
.pbt_coding-02 {
padding:12px;
white-space:pre-wrap;
font-size:14px;
overflow:none;
width:500px;
height:auto;
color:#ddd;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background:#4E4E4E;
}
.pbt_coding-02::selection {
color:#090909;
background:#ECECEC;
}
.pbt_coding-02::-moz-selection {
color:#090909;
background:#ECECEC;
}
HTML code
<pre class="pbt_coding-02">Style Three
Script/Text Goes Here...
</pre>
 |
| Click Image to Enlarge |
Another code highlighter which is optimized with CSS3 selections.You can change the selection background color and font color by changing the #2A2A2A and #F3F3F3 hexadecimal values.Use our hexadecimal color code generator,color code generator to get the color codes.Also you can use web-safe colors to integrate with this syntax highlighter.
CSS Code
.pbt_coding-03 {
width:500px;
position:relative
height:auto;
padding:14px;
font-size:14px;
overflow:none;
white-space:pre-wrap;
border:2px solid #CBCBCB;
background:#E4E4E4;
color:#555555;
}
.pbt_coding-03::selection {
background:#2A2A2A;
color:#F3F3F3;
}
.pbt_coding-03::-moz-selection {
background:#2A2A2A;
color:#F3F3F3;
}
HTML code
<pre class="pbt_coding-03">Style Four
Script/Text Goes Here...
</pre>
 |
| Click Image to Enlarge |
If you have viewed the demo page of this code highlighter,you would find that it has hovering effects especially box-shadow effect.So it will get the visitor's attention as quickly as they mouse over code highlighter.
CSS Code
.pbt_coding-04 {
width:500px;
height:auto;
overflow:auto;
white-space:pre-wrap;
font-size:14px;
border:2px solid #EDE848;
background:#FEFFC6;
color:#2C2C2C;
padding:13px;
-moz-box-shadow:inset 0 0 10px 0 #EDE848;
-webkit-box-shadow:inset 0 0 10px 0 #EDE848;
box-shadow:inset 0 0 10px 0 #EDE848;
-moz-transition:all 0.35s ease-in;
-webkit-transition:all 0.35s ease-in;
-o-transition:all 0.35s ease-in;
transition:all 0.35s ease-in;
}
.pbt_coding-04:hover {
-moz-box-shadow:inset 526px 0 0 0 #FFE478;
-webkit-box-shadow:inset 526px 0 0 0 #FFE478;
box-shadow:inset 526px 0 0 0 #FFE478;
-moz-transition:all 0.35s ease-in;
-webkit-transition:all 0.35s ease-in;
-o-transition:all 0.35s ease-in;
transition:all 0.35s ease-in;
color:#060606;
}
.pbt_coding-04::selection {
background:#19A836;
}
.pbt_coding-04::-moz-selection {
background:#19A836;
}
HTML code
<pre class="pbt_coding-04">Style Five
Script/Text Goes Here...
</pre>
 |
| Click Image to Enlarge |
This syntax highlighter is applicable for both white and dark background templates. Left border and border-radius make this text box more beautiful.
CSS Code
.pbt_coding-05 {
width:500px;
height:auto;
overflow:auto;
white-space:pre-wrap;
font-size:14px;
padding:13px 14px 13px 23px;
border-left:18px solid #358F93;
background:#EEEEEE;
-moz-border-radius:16px;
-webkit-border-radius:16px;
-o-border-radius:16px;
border-radius:16px;
}
.pbt_coding-05::selection {
background:#83C6F2;
}
.pbt_coding-05::-moz-selection {
background:#83C6F2;
}
HTML code
<pre class="pbt_coding-05">
Script/Text Goes Here...
</pre>
Style Six
 |
| Click Image to Enlarge |
This is another attractive code highlighting style.visit demo page to see how the links on code highlighter works.
CSS Code
.pbt_coding-06 {
width:500px;
height:auto;
padding:14px;
font-size:14px;
white-space:pre-wrap;
overflow:auto;
background:#E1E1E1;
-moz-box-shadow:0 0 2px 0px black;
-webkit-box-shadow:0 0 2px 0px black;
box-shadow:0 0 2px 0px black;
}
.pbt_coding-06 a{
text-decoration:none;
font-weight:bold;
color:#3556CD;
}
.pbt_coding-06 a:hover{
text-decoration:underline;
text-shadow:0 0px 0.5em #939393;
}
HTML code
<pre class="pbt_coding-06">Style Seven
Script/Text Goes Here...
</pre>
 |
| Click Image to Enlarge |
This syntax highlighter is enabled the tooltips which can be used in any HTML element such as div,span,a,p,img,h1...etc.If you didn't view the demo,visit the demo page to see how titles of hypertext and non-hypertext work.
CSS Code
.pbt_coding-07 {
width:500px;
height:auto;
overflow:auto;
position:relative;
white-space:pre-wrap;
padding:14px;
font-size:14px;
background:#CECECE;
background:-webkit-gradient(linear,left top,left bottom,from(#CECECE),color-stop(0.43 #E6E6E6),to(#CECECE));
background:-webkit-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:-moz-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:-o-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:-ms-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
-moz-box-shadow:0 0 0 1px #AEB0B7;
-webkit-box-shadow:0 0 0 1px #AEB0B7;
box-shadow:0 0 0 1px #AEB0B7;
}
.pbt_coding-07:hover {
-moz-box-shadow:0 0 3px 0 #AEB0B7;
-webkit-box-shadow:0 0 3px 0 #AEB0B7;
box-shadow:0 0 3px 0 #AEB0B7;
}
.pbt_coding-07 a {
text-decoration:none;
font-weight:bold;
color:#3C99EB;
}
.pbt_coding-07 a:hover {
text-decoration:underline;
}
.pbt_coding-07 [title] {
position:relative;
display:inline;
}
.pbt_coding-07 [title]:after {
content:attr(title);
position:absolute;
color:#ddd;
padding:5px;
width:auto;
white-space:nowrap;
left:-9999px;
-moz-opacity:0;
-khtml-opacity:0;
filter:alpha(opacity=100);
opacity:0;
z-index:98;
bottom:100%;
background:#5B5B5B;
}
.pbt_coding-07 [title]:hover:after {
left:7px;
-moz-opacity:0.85;
-khtml-opacity:0.85;
filter:alpha(opacity=85);
opacity:0.85;
}
.pbt_coding-07::selection {
background:#63E8FF;
color:black;
}
HTML code
<pre class="pbt_coding-07">Style Eight
Script/Text Goes Here...
</pre>
 |
| Click Image to Enlarge |
Another dark color elegant html text highlighter.Green color tooltips make it more pretty and hovering effects make it more clear to view the codes. The tooltip is supported for all HTML elements.It gives us great chance to add long tail words in the description or in Title.
CSS Code
.pbt_coding-08 {
width:500px;
height:auto;
overflow:auto;
position:relative;
white-space:pre-wrap;
padding:16px 16px 16px 16px;
font-size:14px;
color:#535353;
background:#EEEEEE;
border-radius:12px;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.pbt_coding-08:hover {
color:#EEEEEE;
background:#535353;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.pbt_coding-08 [title] {
position:relative;
}
.pbt_coding-08 [title]:after {
content:attr(title);
position:absolute;
left:-9999px;
opacity:0;
background:green;
padding:4px;
font-size:12px;
white-space:nowrap;
color:yellow;
z-index:98;
bottom:100%;
}
.pbt_coding-08 [title]:hover:before {
content:'';
width:0;
height:0;
position:absolute;
border:solid;
border-color:green transparent;
border-width:6px 6px 0 6px;
left:20px;
bottom:75%;
}
.pbt_coding-08 [title]:hover:after {
left:5px;
opacity:1;
}
.pbt_coding-08 a{
font-style:italic;
color:#1D1D1D;
}
.pbt_coding-08 a:hover{
color:#9BA6EE;
font-style:normal;
text-decoration:none;
}
HTML code
<pre class="pbt_coding-08">Style Nine
Script/Text Goes Here...
</pre>
 |
| Click Image to Enlarge |
If you need to add a code highlighter for blogger,here is an attractive one.Its left border,box-shadow,tooltip design and selection colors make it a colorful syntax highlighter.
CSS Code
.pbt_coding-09 {
width:500px;
height:auto;
overflow:auto;
margin:10px;
position:relative;
white-space:pre-wrap;
padding:16px;
font-size:14px;
background:#ddd;
border-left:19px solid #8C2DD4;
-moz-box-shadow:-5px 2px 5px 1px #BDBDBD;
-webkit-box-shadow:-5px 2px 5px 1px #BDBDBD;
box-shadow:-5px 2px 5px 1px #BDBDBD;
}
.pbt_coding-09:hover {
border-left-color:#97532C;
-moz-box-shadow:-5px 2px 5px 1px #A9A8A7;
-webkit-box-shadow:-5px 2px 5px 1px #A9A8A7;
box-shadow:-5px 2px 5px 1px #A9A8A7;
}
.pbt_coding-09::selection {
background:#E59261;
}
.pbt_coding-09::-moz-selection {
background:#E59261;
}
.pbt_coding-09 [title] {
position:relative;
}
.pbt_coding-09 [title]:after {
content:attr(title);
position:absolute;
left:-9999px;
opacity:0;
background:#8C2DD4;
padding:4px;
font-size:12px;
white-space:nowrap;
color:#F9F644;
z-index:98;
bottom:100%;
border-radius:4px;
}
.pbt_coding-09 [title]:hover:before {
content:'';
width:0;
height:0;
position:absolute;
border:solid;
border-color:#8C2DD4 transparent;
border-width:6px 6px 0 6px;
left:20px;
z-index:99;
bottom:75%;
}
.pbt_coding-09 [title]:hover:after {
left:5px;
-moz-opacity:1;
-webkit-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
HTML code
<pre class="pbt_coding-09">Style Ten
Script/Text Goes Here...
</pre>
As you see in above image,i have used CSS transform properties to enlarge the syntax highlighter.You can control the size of scaling.However don't allow it to enclose the content in your blog.
CSS Code
.pbt_coding-10 {
width:500px;
height:auto;
overflow:auto;
margin:10px;
position:relative;
white-space:pre-wrap;
padding:16px;
color:#0B0B0B;
font-size:14px;
background:#58A4EF;
background:-webkit-gradinet(linear,left top,left bottom,from(#58A4EF),color-stop(0.50 #73AFEB),to(#5A64EC));
background:-webkit-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:-moz-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:-o-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:-ms-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
border:15px ridge #254ACF;
-moz-transition:all 0.3503s ease-in;
-webkit-transition:all 0.3503s ease-in;
-o-transition:all 0.3503s ease-in;
transition:all 0.3503s ease-in;
}
.pbt_coding-10:hover {
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
-moz-transition:all 0.3503s ease-out;
-webkit-transition:all 0.3503s ease-out;
-o-transition:all 0.3503s ease-out;
transition:all 0.3503s ease-out;
}
.pbt_coding-10::selection {
font-weight:bold;
color:#FFFF00;
}
.pbt_coding-10::-moz-selection {
color:#FFFF00;
font-weight:bold;
}
HTML code
<pre class="pbt_coding-10">
Script/Text Goes Here...
</pre>
Controlling Syntax Highlighter
You can change the appearances of text highlighters using CSS styling language.Here is a few customizations which can be done easily.
Change Width/Height
Find width:***px; and height:auto; css code in the desired code highlighter.Then change their values to your own.
Disable wrapping the text and enable the Scroll bar
Find white-space:pre-wrap; CSS code and remove it from the source code.Then find that overflow:auto; CSS code is in the code.This code will tell to browser that enable the scroll bars whenever need.So you can tell the browser that only enable the x-axis scroll bar or y-axis scroll bar by this way.
overflow:hidden; - Don't show scroll bars
overflow:x; - Enable vertical scroll bar (Look at first style)
overflow:y; - Enable horizontal scroll bar
Change Font size and Font color
To change the font size and font color of the text in code highlighters,first you have to find the font-size:**px; and color:#******; codes.
Then change the each values to your own.You might want to find the color name or
This tutorial is all about top stylish syntax highlighters.These
all highlighters are codded by me.I intend to increase the list of
syntax highlighters.So more styles will be added on future to this post.
Bookmark this web page for future needs.
I would like to know your questions,views and suggestions about this
tutorial.If you have anything related to this post to talk with me,let's
start our conversation in below commenting section. For non-related
questions to this post,please contact me using the contact form. I will
contact you as soon as possible i got your message.
0 comments:
Post a Comment