Articles by "CSS"
Showing posts with label CSS. Show all posts
Are you a web developer and want to implement tinymce on your website to make it easy during writing and posting of content to be viewed with some awesome formatting like text color,text size,tables,inserting image,paragraph without any coding,tinymce will do that for you.Today we are going to take a little tutor on how to install tinymce on your website automatically without any coding required.

In this tutorial we are going to be looking at how to install tinymce within a shortest period of time and get it running on your website.

Tinymce can be installed in two ways and we are taking them step by step.

The first one is running it on the cloud.Running tinymce on the cloud just copy and paste this code on your HTML head tags

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

  <script>tinymce.init({ selector:'textarea' });</script>

This is how is going to be placed on your HTML as shown below

<!DOCTYPE html>

<html>

<head>

  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

  <script>tinymce.init({ selector:'textarea' });</script>

</head>

<body>

  <textarea>Next, get a free TinyMCE Cloud API key!</textarea>

</body>

</html>


But if you want to run the script on your own website without the cloud method,then follow this procedures successfully.

Steps


1. Download the script  here
2. Extract the script to a folder
3. Create a javascript page and name it script.js and paste the below code there.

tinymce.init({

  selector: 'textarea',

  height: 500,

  theme: 'modern',

  plugins: [

    'advlist autolink lists link image charmap print preview hr anchor pagebreak',

    'searchreplace wordcount visualblocks visualchars code fullscreen',

    'insertdatetime media nonbreaking save table contextmenu directionality',

    'emoticons template paste textcolor colorpicker textpattern imagetools codesample'

  ],

  toolbar1: 'insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',

  image_advtab: true,

  templates: [

    { title: 'Test template 1', content: 'Test 1' },

    { title: 'Test template 2', content: 'Test 2' }

  ],

  content_css: [

    'css?family=Lato:300,300i,400,400i',

    'css/codepen.min.css'

  ]

 });


4.Now go to your HTML and search for <head> and place the below code after <head>
<head>

  <script src="installation path/tinymce.min.js"></script>

  <script src="script.js"></script>

</head>


After all this steps follow successfully,this functionality get the get the  tags <textarea> automatically with that you can be able to editable your items and give them better formatting.

Note:The installation path as mentioned earlier is the folder where the tinymce resides.Below is the demo of tinymce




Today we are looking at how to create calender in php using JQuery and Ajax,this tutorials is have a web calendar displaying on our web calendar automatically.The feature of this calendar is that it has a left and right arrow which can use to navigate to next and previous month and year.For those of us who may want to test it on a local server before installing it to their web page,you need to run it through a server like Xampp server,Wamp server etc.

 php.jpg

Before we proceed there are some basic things we need to know to make the feature more effectively.

•    We need to build a style for our our calendar
•    We need a JQuery script to run this feature,you can download your JQuery Script online
•    We need to build an Ajax page that will call our PHP class
•    We need to build a PHP class
•    Finally we also need to create an index page
Steps To Create Our Web Calendar
  1.  Create a page and name it style.css with the below codes
body {

    font-family: calibri;

}



#calendar-outer {

    width: 574px;

}



#calendar-outer ul {

    margin: 0px;

    padding: 0px;

}



#calendar-outer ul li {

    margin: 0px;

    padding: 0px;

    list-style-type: none;

}



.prev {

    display: inline-block;

    float: left;

    cursor: pointer

}



.next {

    display: inline-block;

    float: right;

    cursor: pointer

}



:focus {

    outline: none;

    background: #ff8e8e;

}



div.calendar-nav {

    background-color: #ff8e8e;

    border-radius: 4px;

    text-align: center;

    padding: 10px;

    color: #FFF;

    box-sizing: border-box;

    font-weight: bold;

}



#calendar-outer .week-name-title li {

    display: inline-block;

    padding: 10px 27px;

    color: #90918b;

    font-size: 0.95em;

    font-weight: 600;

}



.week-day-cell li {

    display: inline-block;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    vertical-align: middle;

    background-color: #f6ffc6;

    color: #ff8e8e;

    border: 1px solid #f1f0f0;

    border-radius: 4px;

    font-size: 1.2em;

}

#body-overlay {background-color: rgba(0, 0, 0, 0.6);z-index: 999;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;}

#body-overlay div {position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px;}

2.   Create a PHP Class and name it class.calender.php with the code given below.

<?php

class PHPCalendar {

    private $weekDayName = array ("MON","TUE","WED","THU","FRI","SAT","SUN");

    private $currentDay = 0;

    private $currentMonth = 0;

    private $currentYear = 0;

    private $currentMonthStart = null;

    private $currentMonthDaysLength = null;   

   

    function __construct() {

        $this->currentYear = date ( "Y", time () );

        $this->currentMonth = date ( "m", time () );

       

        if (! empty ( $_POST ['year'] )) {

            $this->currentYear = $_POST ['year'];

        }

        if (! empty ( $_POST ['month'] )) {

            $this->currentMonth = $_POST ['month'];

        }

        $this->currentMonthStart = $this->currentYear . '-' . $this->currentMonth . '-01';

        $this->currentMonthDaysLength = date ( 't', strtotime ( $this->currentMonthStart ) );

    }

   

    function getCalendarHTML() {

        $calendarHTML = '<div id="calendar-outer">';

        $calendarHTML .= '<div class="calendar-nav">' . $this->getCalendarNavigation() . '</div>';

        $calendarHTML .= '<ul class="week-name-title">' . $this->getWeekDayName () . '</ul>';

        $calendarHTML .= '<ul class="week-day-cell">' . $this->getWeekDays () . '</ul>';       

        $calendarHTML .= '</div>';

        return $calendarHTML;

    }

   

    function getCalendarNavigation() {

        $prevMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart. ' -1 Month'  ) );

        $prevMonthYearArray = explode(",",$prevMonthYear);

       

        $nextMonthYear = date ( 'm,Y', strtotime ( $this->currentMonthStart . ' +1 Month'  ) );

        $nextMonthYearArray = explode(",",$nextMonthYear);

       

        $navigationHTML = '<div class="prev" data-prev-month="' . $prevMonthYearArray[0] . '" data-prev-year = "' . $prevMonthYearArray[1]. '"><</div>';

        $navigationHTML .= '<span id="currentMonth">' . date ( 'M', strtotime ( $this->currentMonthStart ) ) . '</span>';

        $navigationHTML .= '<span contenteditable="true" id="currentYear" style="margin-left:5px">'.    date ( 'Y', strtotime ( $this->currentMonthStart ) ) . '</span>';

        $navigationHTML .= '<div class="next" data-next-month="' . $nextMonthYearArray[0] . '" data-next-year = "' . $nextMonthYearArray[1]. '">></div>';

        return $navigationHTML;

    }

   

    function getWeekDayName() {

        $WeekDayName= '';       

        foreach ( $this->weekDayName as $dayname ) {           

            $WeekDayName.= '<li>' . $dayname . '</li>';

        }       

        return $WeekDayName;

    }

   

    function getWeekDays() {

        $weekLength = $this->getWeekLengthByMonth ();

        $firstDayOfTheWeek = date ( 'N', strtotime ( $this->currentMonthStart ) );

        $weekDays = "";

        for($i = 0; $i < $weekLength; $i ++) {

            for($j = 1; $j <= 7; $j ++) {

                $cellIndex = $i * 7 + $j;

                $cellValue = null;

                if ($cellIndex == $firstDayOfTheWeek) {

                    $this->currentDay = 1;

                }

                if (! empty ( $this->currentDay ) && $this->currentDay <= $this->currentMonthDaysLength) {

                    $cellValue = $this->currentDay;

                    $this->currentDay ++;

                }

                $weekDays .= '<li>' . $cellValue . '</li>';

            }

        }

        return $weekDays;

    }

   

    function getWeekLengthByMonth() {

        $weekLength =  intval ( $this->currentMonthDaysLength / 7 );   

        if($this->currentMonthDaysLength % 7 > 0) {

            $weekLength++;

        }

        $monthStartDay= date ( 'N', strtotime ( $this->currentMonthStart) );       

        $monthEndingDay= date ( 'N', strtotime ( $this->currentYear . '-' . $this->currentMonth . '-' . $this->currentMonthDaysLength) );

        if ($monthEndingDay < $monthStartDay) {           

            $weekLength++;

        }

       

        return $weekLength;

    }

}

?>

3. Next proceed by creating PHP Ajax page and name it calendar-ajax.php with the below code
<?php

require_once 'class.calendar.php';

$phpCalendar = new PHPCalendar ();



$calendarHTML = $phpCalendar->getCalendarHTML();

echo $calendarHTML;

?>

4.    Finally create an index.php page with the given code below
<?php

require_once 'class.calendar.php';

$phpCalendar = new PHPCalendar ();

?>

<html>

<head>

<link href="style.css" type="text/css" rel="stylesheet" />

<title>PHP Calendar</title>

</head>

<body>

<div id="body-overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>

<div id="calendar-html-output">

<?php

$calendarHTML = $phpCalendar->getCalendarHTML();

echo $calendarHTML;

?>

</div>

<script src="jquery-1.11.2.min.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

    $(document).on("click", '.prev', function(event) {

        var month =  $(this).data("prev-month");

        var year =  $(this).data("prev-year");

        getCalendar(month,year);

    });

    $(document).on("click", '.next', function(event) {

        var month =  $(this).data("next-month");

        var year =  $(this).data("next-year");

        getCalendar(month,year);

    });

    $(document).on("blur", '#currentYear', function(event) {

        var month =  $('#currentMonth').text();

        var year = $('#currentYear').text();

        getCalendar(month,year);

    });

});

function getCalendar(month,year){

    $("#body-overlay").show();

    $.ajax({

        url: "calendar-ajax.php",

        type: "POST",

        data:'month='+month+'&year='+year,

        success: function(response){

            setInterval(function() {$("#body-overlay").hide(); },500);

            $("#calendar-html-output").html(response);   

        },

        error: function(){}

    });

   

}

</script>

</body>

</html>


Note:You have to put all this code in the same folder,also note that the line (35,36,37) which is highlighted is calling the JQuery script I ask you to download earlier before we proceeded to this tutorial.



Today we are looking at how to create a responsive table for your website.Are you hearing responsive for the first time,responsive is just an approach we employ in website design to make the web page page resizable to the device window.


In this instance if you have a web page in your website which window is large that when view on a smaller window,you can not see all the data represented,that when responsive now comes in.

Let proceed on designing a responsive table,just relax as we move step by step.
Steps To Create A Responsive Table

•    Create a CSS file for your table,for the tutorials we are going to create CSS file name style.css ,do not forget when creating a CSS file to add .css extension.Copy and Paste the below code to your editor and name it style.css


table {

    border-collapse: collapse;

    border-spacing: 0;

    width: 100%;

    border: 1px solid #ddd;

}



th, td {

    border: none;

    text-align: left;

    padding: 8px;

}



tr:nth-child(even){background-color: #f2f2f2}

div {

overflow-x:auto;

}



•    Next write the html for your table with the code as shown below,you can modify to suite your own project.


<div>

  <table>

    <tr>

      <th>First Name</th>

      <th>Last Name</th>

      <th>First Game</th>

      <th>Second Game</th>

      <th>Third Game</th>

      <th>Fourth Game</th>

      <th>Fifth Game</th>

      <th>Sixth Point</th>

      <th>Seventh Game</th>

      <th>Eighth Game</th>

      <th>Nineth Game</th>

      <th>Total Points</th>

    </tr>

    <tr>

      <td>Bernard</td>

      <td>Benedict</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>450</td>

    </tr>

    <tr>

      <td>Evelyn</td>

      <td>Macpherson</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>846</td>

    </tr>

    <tr>

      <td>Benson</td>

      <td>Benjamin</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>603</td>

    </tr>

  </table>

</div>


•    Here is the complete code for the responsive table as shown below.Copy and paste to your code editor modify to your own taste and save it with anyname.html

<!DOCTYPE html>

<html>

<head>

    <title>Responsive Table</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div>

  <table>

    <tr>

      <th>First Name</th>

      <th>Last Name</th>

      <th>First Game</th>

      <th>Second Game</th>

      <th>Third Game</th>

      <th>Fourth Game</th>

      <th>Fifth Game</th>

      <th>Sixth Point</th>

      <th>Seventh Game</th>

      <th>Eighth Game</th>

      <th>Nineth Game</th>

      <th>Total Points</th>

    </tr>

    <tr>

      <td>Bernard</td>

      <td>Benedict</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>450</td>

    </tr>

    <tr>

      <td>Evelyn</td>

      <td>Macpherson</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>846</td>

    </tr>

    <tr>

      <td>Benson</td>

      <td>Benjamin</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>603</td>

    </tr>

  </table>

</div>

</body>

</html>


I believe this tutorial has been useful to you,please do not forget to share with a friend and also subscribe with us to get the latest updates.

Contact form as the name implies is a medium of interaction between a website owner and the viewer. The contact us form allow visitors to communicate with the site owner from the website. Using the contact us form, visitors can easily submit their query, views, opinions and suggestions to the site administrator about the website, service or product that is been provided by the site.



Contact us form is very crucial in website for easy communication between the viewer and the site owner.Through this medium the viewer send the administration email base on the services been offered and this medium also help the administrator to have quick response to this client.

In this tutorial we are taking a tour on how to create a basic contact us form using PHP,CSS and HTML in building this system. Contact us notify the admin via email whenever there is a request from client or suggestion.

This tutorial is divided into three parts the PHP part which serve as the engine per say,HTML which is just like the body and also the CSS which gives the HTML a beautiful layout.We are going to take it one step at a time,so relax as we move on.

Steps Involves in Creating A Simple Contact Us Form

Below are some of the steps which we are going to be undertaking.

1.    Create a Database if you have not done that and if you do not know how to create a database follow our tutorials on how to create a database here.

2.    Create the HTML page.In this section we are going to create a HTML page that will collect our values from our client and submit it to our website database and admin email account by adding the given below code to our HTML page of our website.

<h2>Basic PHP Contact Form</h2>
<div class="contactFrm">
    <?php if(!empty($statusMsg)){ ?>
        <p class="statusMsg <?php echo !empty($msgClass)?$msgClass:''; ?>"><?php echo $statusMsg; ?></p>
    <?php } ?>
    <form action="" method="post">
        <h4>Name</h4>
        <input type="text" name="name" placeholder="Your Name" required="">
        <h4>Email </h4>
        <input type="email" name="email" placeholder="email@example.com" required="">
        <h4>Subject</h4>
        <input type="text" name="subject" placeholder="Write subject" required="">
        <h4>Message</h4>
        <textarea name="message" placeholder="Write your message here" required=""> </textarea>
        <input type="submit" name="submit" value="Submit">
        <div class="clear"> </div>
    </form>
</div>


3.The Next step,is to create our PHP page that will help in posting this values to our database and and to admin email account by verifying the email, checking for blank input etc,escaping some variables before posting it to our database.Copy and Paste the below code to PHP page and save with .php extension.

<?php
$statusMsg = '';
$msgClass = '';
if(isset($_POST['submit'])){
    // Get the submitted form data
    $email = $_POST['email'];
    $name = $_POST['name'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
   
    // Check whether submitted data is not empty
    if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
       
        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $statusMsg = 'Please enter your valid email.';
            $msgClass = 'errordiv';
        }else{
            // Recipient email
            $toEmail = 'your_email@gmail.com';
            $emailSubject = 'Contact Request Submitted by '.$name;
            $htmlContent = '<h2>Contact Request Submitted</h2>
                <h4>Name</h4><p>'.$name.'</p>
                <h4>Email</h4><p>'.$email.'</p>
                <h4>Subject</h4><p>'.$subject.'</p>
                <h4>Message</h4><p>'.$message.'</p>';
           
            // Set content-type header for sending HTML email
            $headers = "MIME-Version: 1.0" . "\r\n";
            $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
           
            // Additional headers
            $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
           
            // Send email
            if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
                $statusMsg = 'Your contact request has been submitted successfully !';
                $msgClass = 'succdiv';
            }else{
                $statusMsg = 'Your contact request submission failed, please try again.';
                $msgClass = 'errordiv';
            }
        }
    }else{
        $statusMsg = 'Please fill all the fields.';
        $msgClass = 'errordiv';
    }
}
?>


4.Next the step is to beautify our HTML page with some CSS code.To do this copy and paste the below code in your stylesheet page and save as .css extension.

.contactFrm h4 {
    font-size: 1em;
    color: #252525;
    margin-bottom: 0.5em;
    font-weight: 300;
    letter-spacing: 5px;
}
.contactFrm input[type="text"], .contactFrm input[type="email"] {
    width: 92%;
    color: #9370DB;
    background: #fff;
    outline: none;
    font-size: 0.9em;
    padding: .7em 1em;
    border: 1px solid #9370DB;
    -webkit-appearance: none;
    display: block;
    margin-bottom: 1.2em;
}
.contactFrm textarea {
    resize: none;
    width: 93.5%;
    background: #fff;
    color: #9370DB;
    font-size: 0.9em;
    outline: none;
    padding: .6em 1em;
    border: 1px solid #9370DB;
    min-height: 10em;
    -webkit-appearance: none;
}
.contactFrm input[type="submit"] {
    outline: none;
    color: #FFFFFF;
    padding: 0.5em 0;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-appearance: none;
    background: #9370DB;
    transition: 0.5s all;
    border: 2px solid #795CB4;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
    width: 47%;
    cursor: pointer;
}
.contactFrm input[type="submit"]:hover {
    background: none;
    color: #9370DB;
}
p.statusMsg{font-size:18px;}
p.succdiv{color: #008000;}
p.errordiv{color:#E80000;}



I believe this tutorial has help you a lot in carrying out this simple project on your website,do not forget to share with a friend by clicking on the share button below and you can also subscribe to get the latest update delivered to your inbox by clicking here

For most programmers who like writing articles on different type of programs related tutorials,In one way or the other will want their code to highlighter just like the one written on a well known code editor like sublime text, brackets etc. Today we are going to be looking at how to highlight your code on blogger with just a simple code highlighter known as PrismJs.
Are still wondering what's PrismJs ? Check it's official page(website) for more information http://prismjs.com/, it's the second generation of syntax highlighting, it is more lightweight and that doesn't affect your page load time at all.


The overall adding procedure is the same as mentioned on the PrismJS official page but there are yet some modifications need to be made if you want it to work properly on Blogger blogs. In this tutorial i will provide the links to minified version of the codes, once you get the idea about adding it, you can use whatever version you want.

How To Add PrismJs on Your Blogger

•    Firstly login into your blogger site.
•    After you have logged in go to your Dashboard and click on theme
•    Proceed by clicking Edit HTML
•    After the Edit HTML has loaded press CTRL + F  and search for </head>
•    Copy and paste the code given below just before </head>


<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
 

<script type="text/javascript" src="http://prismjs.com/prism.js">

•    Finally Click on save
Tips:Make sure you backup your template before you carry out the procedure given above.

Tips : The links in the script and link tag is only for demo of the code, if you want to use different theme on your hosted website then you can download the version of your choice on PrismJS Download page, upload it to your hosting service and replace the links (prismjs.com/theme/prism.css and prismjs.com/prism.js) with your hosted file's links .

How To Display Code on Your Blogger Using PrismJs

The following example is for displaying HTML codes in your pages, to define any languages you have to edit language-xxx

<pre class='language-markup'>

<code>

// Your HTML Code here

</code>

</pre>

Tip: You can add the class for a language to any parent element and the children elements will inherit the defined language. It is very useful when you just want to display codes of the same language in a page also xxx refer to the language you are writing on eg php.

How To Implement Different Languages

To define languages you just have to change the language-xxxx in the class you can find in <pre> and <code> tags.

    For HTML we will use this tags to wrap the display codes
       
   
<pre class='language-markup'>

    <code>

    // Your HTML Code here

    </code>

    </pre>


    language-markup is used for HTML markups. You may use this for XML codes too.
    CSS will be wrapped into this tags
       

 <pre class='language-css'>

    <code>

    // Your CSS Code here

    </code>

    </pre>

    JavaScript can be wrapped into this

       
   
<pre class='language-javascript'>

    <code>

    // Your JS Code here

    </pre>

    </code>

    JQuery can also be displayed with this.
    Want to learn more than check out the PrismJS homepage

Read also: How to Use Google Prettify Syntax Highlighter With Blogger


How To Implement  Different Themes

The great thing about PrismJS syntax highlighter is that you can make the code blend with your site's overall theme by using different themes provided by PrismJS. There are the following themes available by default for it : default, dark, funky, okaidia, twilight, coy and solarized light

With a single addition of a CSS file you can change the theme for all PrismJS syntax highlighter instances on your blog.
In the first step we added the default theme,
  
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>

<script type='text/javascript' src="http://prismjs.com/prism.js"></script>

   

The http://prismjs.com/themes/prism.css in the first line of code sets the theme to default, while the following sets it to its corresponding theme.

Dark
 
 <link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>

Funky

<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>

Okaidia

<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>
 

Twilight

<link rel="stylesheet" href="http://prismjs.com/themes/prism-twilight.css"/>

Coy

<link rel="stylesheet" href="http://prismjs.com/themes/prism-coy.css"/>

Solarized Light
  
<link rel="stylesheet" href="http://prismjs.com/themes/prism-solarizedlight.css"/>

   
     
Are you a blogger that do write articles  on programming and want to beautify the code to look like the code written on IDE google prettify will do that perfect for you without writing bunch of codes just to achieve that particular aim. This tutorial explains how to add Prettify syntax highlighter to your blogger blog.


What Does Prettify Code Highlighter Do?

It adds styles to code snippets so that token boundaries stand out and your
readers can get the gist of your code without having to mentally perform a
left-to-right parse. The prettyprinter looks for `<pre>`, `<code>`, or `<xmp>` elements with the
*prettyprint* class, and adds `<span>`s to colorize keywords, strings,
comments, and other token types.

How To Setup Google Prettifier

Step 1. Login to your Blogger account and go to "Theme"--> "Edit HTML" of your blog.

Step 2. You can load the JavaScript and CSS for prettify via one URL. Press CTRL + F and search for </body> Add this code just before </body> tag:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>


Above code will load the entire system  and schedule the prettifier to run on page load.

Step 3. Save your theme. You have now successfully added Prettify auto-loader to your Blogger blog.

Step 4. Now when you want to display a source code snippet in your blogger post, go to blogger post editor and select "HTML" mode.

Step 5. Use <pre>  or  <code> tag with "prettyprint" class as below.
 <pre class="prettyprint">source code here</pre>
<pre class="prettyprint"><code class"prettyprint">source code here</code></pre>


 Code Example:

<pre class="prettyprint">

<script type="text/javascript">

// Say hello world until the user starts questioning

// the meaningfulness of their existence.

function helloWorld(world) {

  for (var i = 42; --i &gt;= 0;) {

    alert('Hello ' + String(world));

  }

}

</script>

<style>

p { color: pink }

b { color: blue }

u { color: &quot;umber&quot; }

</style>

</pre>


Step 6. Publish/Update your post and view your post. It will look like this:
Result:
<script type="text/javascript">

// Say hello world until the user starts questioning

// the meaningfulness of their existence.

function helloWorld(world) {

for (var i = 42; --i >= 0;) {

alert('Hello ' + String(world));

}

}

</script>

<style>

p { color: pink }

b { color: blue }

u { color: "umber" }

</style>


How to Add Different Code Styles

Only you need to do is, replace "Step 2" code with below codes and that does the magic that with print your code beautifully and more attractive.

Desert Skin:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert">
</script>



Sunburst Skin:
<script src="https://google-code-prettify.googlecode.com/svn/loade/run_prettify.js?skin=sunburst">
</script>



Sons-Of-Obsidian Skin:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian">
</script>


Doxy Skin:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=doxy">
</script>



How to Specify the Language of Your Code

File extensions supported by default include: "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"
The lang-* class specifies the language file extensions.
You can specify other languages by specifying the language extension along with the prettyprint class.
For example, The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag. So you can add your CSS codes like this:
<pre class="prettyprint lang-css">
CSS code here
</pre>

Read also:How To Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot For Better Formatting
Example:
How to Display Codes with Line Numbers

To display line numbers, use "linenums" class like this:
<pre class="prettyprint linenums">

source code here

</pre>


Code Example:
<pre class="prettyprint  linenums">



<script type="text/javascript">

// Say hello world until the user starts questioning

// the meaningfulness of their existence.

function helloWorld(world) {

  for (var i = 42; --i &gt;= 0;) {

    alert('Hello ' + String(world));

  }

}

</script>

<style>

p { color: pink }

b { color: blue }

u { color: &quot;umber&quot; }

</style>



</pre>

Result:
<script type="text/javascript">

// Say hello world until the user starts questioning

// the meaningfulness of their existence.

function helloWorld(world) {

for (var i = 42; --i >= 0;) {

alert('Hello ' + String(world));

}

}

</script>

<style>

p { color: pink }

b { color: blue }

u { color: "umber" }

</style>



Below code will display a CSS code with line numbers:

<pre class="prettyprint lang-css linenums">

body{background:#000000 url(http://3.bp.blogspot.com/-vB6rbTuTh34/UEw9OyUKQJI/AAAAAAAAIoQ/A3dwg6dKC_g/s1600/background.jpg) center top no-repeat;color:#555555;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin:0px;padding:0px;}

a:link,a:visited{color:#C11112;text-decoration:underline;outline:none;}

a:hover{color:#FE3D36;text-decoration:none;outline:none;}

a img{border-width:0}

#body-wrapper{margin:0px;padding:0px;}

</pre>



Result:
body{background:#000000 url(http://3.bp.blogspot.com/-vB6rbTuTh34/UEw9OyUKQJI/AAAAAAAAIoQ/A3dwg6dKC_g/s1600/background.jpg) center top no-repeat;color:#555555;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin:0px;padding:0px;}
a:link,a:visited{color:#C11112;text-decoration:underline;outline:none;}
a:hover{color:#FE3D36;text-decoration:none;outline:none;}
a img{border-width:0}
#body-wrapper{margin:0px;padding:0px;}

 Serving your own JS & CSS

You can download the script here
the scripts and styles and serve them yourself.  Make sure to include both the
script and a stylesheet Below are the syntax to include both the JS and CSS on your own website:



<link rel="stylesheet" type="text/css" href="prettify.css">




<script type="text/javascript" src="prettify.js">
</script>




Then run the `PR.prettyPrint()` function once your page has finished loading.
One way to do this is via the `onload` handler thus:
<body onload="PR.prettyPrint()">