How To Add Syntax Highlighter In Blogger Blog With HTTPS Version - FindersAdda : Tutorials of Make Money, Computer or Internet

Thursday, 21 December 2017

How To Add Syntax Highlighter In Blogger Blog With HTTPS Version

How to add syntax highlighter in blogger blog with https version
Hello Friends! How are you? I hope you will be well and also hope that you found my last post On "What is DMCA and What are the Benefits of DMCA?" and it must have been very useful for you.Thank you very much for all lovely comment and suggestion. You've inspired me to write another post.


In this article, I am going to share "How To Add Syntax Highlighter In Blogger Blog With HTTPS Version". I have already written a post on How to add syntax highlighter in blogger blog with HTTP version. Let's begin...


Why should we add Syntax Highlighter in Blog?

If you don't know why should we add syntax highlighter on the blog then don't worry, I will tell you.

Syntax highlighter is used for highlighter the text according to the program like C, C++, Java, HTML etc. You can make beautiful your blog code by adding syntax highlighter. If you share program on your blog then you must add syntax highlighter.

I am going to tell about code-prettify. Code-prettify is developed by Google to highlight the syntax so that your blog code looks more beautiful.

What are the benefits of Code-prettify?

  • It is responsive.
  • It is developed by Google.
  • Load fast than other syntax highlighters.
  • It is very easy because you don't need to add more code to your theme.
  • It is used in both https and http version


How to add Syntax highlighter in blogger blog with https version?


First Step

  • First of all, copy the below code

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">

  • After that, open your blogger dashboard in browser's new tab.
  • After that, click on the Theme option besides blogger dashboard and then click on the Edit HTML option.
  • Now click the mouse pointer anywhere between the code and press ctrl + f and find </head> tag.
  • After finding, paste the copied code before </head> tag and then click on the Save Theme option.
Second Step

In the next step, you have to add some CSS code according to style that means I have put several CSS codes for different style select one of them and add it into your blog theme before </b:skin> tag.

Note: The all code has been taken from compromath.com but customized by me.


1. Default Theme



<!--Default theme-->.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}.prettyprint{
overflow-wrap: normal; overflow-x: scroll; width: 100%; padding: 12px 20px; resize: none;
}


Default theme preview


2. Desert Theme



pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;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:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}.prettyprint{
overflow-wrap: normal; overflow-x: scroll; width: 100%; padding: 12px 20px; resize: none;
}

Desert Theme Preview


3. Doxy Theme



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}}.prettyprint{
overflow-wrap: normal; overflow-x: scroll; width: 100%; padding: 12px 20px; resize: none;
}

Doxy Theme Preview


4. SunBurst Theme



code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;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:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;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:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}.prettyprint{
overflow-wrap: normal; overflow-x: scroll; width: 100%; padding: 12px 20px; resize: none;
}

SunBurst Theme


Third Step

Now your blog theme is ready for highlighting syntax. When you will write a new post then add the below code and write your code instead of your code here. Don't paste this code in compose mode. Paste this code only in HTML mode. choose language code according to your program. I have given below various language code.

<pre class="prettyprint"><code class="language-html">YOUR CODE HERE</code></pre>

Programming Language
Value
Attributes
Java
Java
language-java
C
c
language-c
C++
c++
language-cpp
HTML
html
language-html
XML
xml
language-xml
CSS
css
language-css
JavaScript
js
language-js
C#
cs
language-cs
PHP
php
language-php
Python
py
language-py
Ruby
rb
language-rb
Perl
perl
language-perl
xHTML
xhtml
language-xhtml

Note: Before adding your program code parse it into XML format by using HTML to XML parser (click here to convert) because if you add code directly then this code will be applied to your blog post not showing in your blog.

Once again I hope you liked this post so much. If you like this post then share with your friends also ask your problem through comment box. I will try to solve your problem as soon as possible...

Thank You So Much

By Sumit Kumar Gupta

About Author

SUMIT KUMAR GUPTA
SUMIT KUMAR GUPTA

Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.

1 comments

  1. Hello Sir Plz Check Your Gmail Account I have sent You a IMP Message....I need Help

    ReplyDelete

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.