Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Source Code Formatter With Prettier Tool Script on blogger. This is the Right Place to you. Since You can get this Script for free and gain deep pocket With Your adsense.

Today, in this article, I will Discuss with you about How to Create Source Code Formatter With Prettier Tool in Blog - Post or Page.

What is Prettier

Prettier is a source code formatter. It upholds a predictable style by parsing your code and yet again printing it with its own principles that consider the most extreme line length, wrapping code when important. It upholds various programming dialects, as : JavaScript, JSON, JSX, CSS, Markdown.

Prettier is exceptionally famous in light of the fact that it further develops code coherence and makes the coding style reliable for groups. Designers are bound to embrace a standard rather than composing their own code style without any preparation, so devices like Prettier will make your code look great without you truly fiddling with the organizing.

How to Create

So, to create Source Code Formatter With Prettier Tool on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this tool in your blogger website.

Step 1

• You will go to your - Blogger Dashboard
• Go to Theme
• Go to - Edit HTML
• Search - </head> or &lt;/head&gt;
• Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
• Save Theme

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/itsTSUI/tsP/toolBody.css'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

• After Save Theme
• Create a new Post or Page
• Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
• Publish

<div class="Tbody">

<b>Text or Code</b>
<textarea id="Ppcode" rows="5" placeholder="Type Your Text or Code Here...">
</textarea>

<b>Pre-Wrap</b>
<select id="Pw">
<option value=";white-space:pre-wrap" selected>Allow</option>
<option value="">Not Allow</option>
</select>

<b>Font Size</b>
<input id="Pfsize" value="12px" placeholder="Enter Font Size Here..."/>

<b>Font Colour</b>
<input id="Pfcolor" value="#000000" placeholder="Enter Font Colour Here..."/>
  
<b>Background Colour</b>
<input id="Pbg" value="#ffffff" placeholder="Enter Background Colour Here..."/>
  
<b>Border</b>
<input id="Pborder" value="1px solid #000000" placeholder="Enter Border Here..."/>
  
<b>Border Radius</b>
<input id="Pbradius" value="5px" placeholder="Enter Radius Here..."/>

<b>Padding</b>
<input id="Ppadding" Value="10px" placeholder="Enter Padding Here..."/>

<button type="button" id="Gbutton">Get Code<i class="fa-regular fa-hand-point-right"></i></button>

<br/>

<b>Formatted Code</b>
<textarea id="Pcode1" style="display:none"></textarea>

<textarea id="Pcode2" rows="5" readonly placeholder="Get Formatted Code Here..."></textarea>

<button type="button" class="copybutton" data-clipboard-target="#Pcode2"><i class="fa-regular fa-copy"></i>Copy Code</button>

<button type="button" id="Tanother"><i class="fa fa-repeat"></i>Try Another</button>

</div>
  
<script>
$("#Gbutton").click(function(){f=$("#Ppcode").val(),f=(f=(f=(f=(f=(f=f.replace(/\t/g," ")).replace(/&/g,"&amp;")).replace(/</g,"&lt;")).replace(/>/g,"&gt;")).replace(/"/g,"&quot;")).replace(/'/g,"&#039;"),$("#Pcode1").val(f);var e=$("#Pw").val(),o=$("#Pfsize").val(),a=$("#Pfcolor").val(),l=$("#Pbg").val(),c=$("#Pborder").val(),r=$("#Pbradius").val(),t=$("#Ppadding").val(),d=$("#Pcode1").val();$("#Pcode2").val('<pre style="display:block;overflow-x:auto;background:'+l+";border:"+c+";border-radius:"+r+";font-size:"+o+";color:"+a+";padding:"+t+";width:100%;line-height:1.5;word-spacing:0"+e+'"><code>'+d+"</code></pre>")}),$(function(){new ClipboardJS(".copybutton"),$(".copybutton").click(function(){$(this).html("√ Code Copied");var e=$(this),o=setInterval(function(){e.html("<i class='fa-regular fa-copy'></i>Copy Code"),clearInterval(o)},1500)})}),$("#Tanother").click(function(){$("#Ppcode").val(""),$("#Pcode1").val(""),$("#Pcode2").val("")});
</script>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src='https://clipboardjs.com/dist/clipboard.min.js'></script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.