Adding Syntax Highlighting to Code Snippets in Blogger

Syntax Highlighting code

  1. These items are filled by software skill. 
  2. This exploratory responsive with the screens 
  3. This code is created by Google 
  4. Easy to use.

Go to Control Panel -> Theme -> HTML Edit and place this link above  
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
Then paste this code below in your blog 

a,
code.prettyprint a,
pre.prettyprint a {
 text-decoration: none
}

code .str,
pre .str {
 color: #fec243
}

code .kwd,
pre .kwd {
 color: #8470FF
}

code .com,
pre .com {
 color: #32cd32;
 font-style: italic
}

code .typ,
pre .typ {
 color: #6ecbcc
}

code .lit,
pre .lit {
 color: #d06
}

code .pun,
pre .pun {
 color: #8B8970
}

code .pln,
pre .pln {
 color: #f0f0f0
}

code .tag,
pre .tag {
 color: #9c9cff
}

code .htm,
pre .htm {
 color: plum
}

code .xsl,
pre .xsl {
 color: #d0a0d0
}

code .atn,
pre .atn {
 color: #46eeee;
 font-weight: 400
}

code .atv,
pre .atv {
 color: #EEB4B4
}

code .dec,
pre .dec {
 color: #3387CC
}

code.prettyprint,
pre.prettyprint {
 font-family: 'Droid Sans Mono', 'CPMono_v07 Bold', 'Droid Sans';
 font-weight: 700;
 font-size: 9pt;
 background-color: #0f0f0f;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -o-border-radius: 8px;
 -ms-border-radius: 8px;
 -khtml-border-radius: 8px;
 border-radius: 8px
}

pre.prettyprint {
 width: 95%;
 margin: 1em auto;
 padding: 1em;
 white-space: pre-wrap
}

ol.linenums {
 margin-top: 0;
 margin-bottom: 0;
 color: #8B8970
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
 list-style-type: none
}

@media print {
 code.prettyprint,
 pre.prettyprint {
  background-color: #fff
 }
 code .str,
 pre .str {
  color: #088
 }
 code .kwd,
 pre .kwd {
  color: #006;
  font-weight: 700
 }
 code .com,
 pre .com {
  color: #oc3;
  font-style: italic
 }
 code .typ,
 pre .typ {
  color: #404;
  font-weight: 700
 }
 code .lit,
 pre .lit {
  color: #044
 }
 code .pun,
 pre .pun {
  color: #440
 }
 code .pln,
 pre .pln {
  color: #000
 }
 code .tag,
 pre .tag {
  color: #b66ff7;
  font-weight: 700
 }
 code .htm,
 code .xsl,
 pre .htm,
 pre .xsl {
  color: #606;
  font-weight: 700
 }
 code .atn,
 pre .atn {
  color: #c71585;
  font-weight: 400
 }
 code .atv,
 pre .atv {
  color: #088;
  font-weight: 400
 }
}



<pre class="prettyprint"><code class="language-html">  YOUR CODE HRER  </code></pre>
Replace '  Your Code ' to code that you want to put in the box.


  • Supported languages:
  1. language-html HTML
  2. language-csh CSS
  3. language-js  js
  4. language-xml  xml
  5. language-xhtml  xhtml
  6. language-c  C
  7. language-cpp  C++
  8. language-cs  C#
  9. Language-php  php
  10. language-py  Python
  11. language-java  Java
  12. language-rb  Ruby
  13. language-perl  Perl

5 comments:

  1. Replies
    1. Adding Syntax Highlighting to Code Snippets in Blogger

      Delete
    2. his comment has been removed by the author.

      Delete
  2. Adding Syntax Highlighting to Code Snippets in Blogger

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete