How can I use pretty print code formatter in Blogger? | હું બ્લોગરમાં સુંદર પ્રિન્ટ કોડ ફોર્મેટરનો ઉપયોગ કેવી રીતે કરી શકું ?

pretty print code formatter એ એક પ્રકાર નું કોડ ફોરમેટર છે જે આપણા કોઈ કોડ કે સ્ક્રિપ્ટ ને સારી (સુંદર) રીતે દાર્શવે છે. સામાન્ય રીતે આપણે કોઈ પણ સ્ક્રિપ્ટ ને ડાયરેક્ટ પોસ્ટમાં ટાઈપ કરી ને મૂકીએ છીએ જે સારું નથી લાગતું. એટલા માટે આ લેખમાં તમારા કોડ ને બ્લોગ પોસ્ટમાં સુંદર રીતે કેવી રીતે દરશાવવું તેના પગલાં જણાવ્યા છે. જે એપ્લાય કર્યાં બાદ નીચે મુજબ તમારો કોડ દેખાશે પોસ્ટમાં.

pretty print પહેલા:

pretty print એપ્લાય કર્યા પછી:

બ્લોગરમાં સુંદર પ્રિન્ટ કોડ ફોર્મેટર મુકવાના પગલાં | Steps:

1.સૌપ્રથમ blogger.com ઉપર જાઓ.

2.ત્યાર બાદ Theme ઓપ્શન ઉપર જાઓ.

3.હવે CUSTOMIZE ની બાજુના એરો ઉપર ક્લીક કરો.

4.હવે તેમાં ઘણા બધા ઓપ્શન્સ ખુલશે તેમાંથી બેકઅપ ઉપર ક્લીક કરો. એટલે તમારા હાલના બ્લોગ નો બેકઅપ ડાઉનલોડ થઈ જશે જેને કોઈ એક જગ્યાએ સાચવી ને મૂકી દેવો. કારણ કે કોડ એડિટ કરતા કરતા કાંઈ પણ તકલીફ થાય તમારા થીમ કે ટેમ્પ્લેટમાં તો પાછો બેકઅપ અપલોડ કરી દેવો.

5.હવે બેકઅપ ડાઉનલોડ ઉપર ક્લીક કરો. જેથી એક ફાઈલ ડાઉનલોડ થશે.

6.હવે ફરીથી CUSTOMIZE ની બાજુના એરો ઉપર ક્લીક કરો. અને Edit HTML ક્લીક કરો.

7. તમને નીચે મુજબ નો કોડ દેખાશે.

8. હવે તે કોડ ઉપર કોઈ જગ્યાએ ક્લીક કરો. અને CTRL+F કી દબાવો(સર્ચ કરવા).એટલે તેમાં એક નાનું સર્ચ ઓપ્શન ખુલશે ડાબી બાજુ ઉપર. જેમાં </head > ટાઈપ કરો અને enter દબાવો એટલે તે મળી જશે (પીળા કલરમાં હાઈલાઈટ થઈ ને). નીચે ફોટામાં દરશાવ્યાં મુજબ.

9. હવે </head > ની તરત જ ઉપર નીચેના કોડ ને પેસ્ટ કરો.

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

10.જે આવું કઈંક (નીચે મુજબનું) દેખાશે.