Breaking

Tuesday, 25 July 2017

How to Use Google Prettify Syntax Highlighter With Blogger

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()">

No comments:

Post a Comment