How To Role Google Prettify Syntax Highlighter Amongst Blogger
What Does Prettify Code Highlighter Do?
It adds styles to code snippets in addition to then that token boundaries stand upward out in addition to your
readers tin transportation away larn the gist of your code without having to mentally perform a
left-to-right parse. The prettyprinter looks for `<pre>`, `<code>`, or `<xmp>` elements amongst the
*prettyprint* class, in addition to adds `<span>`s to colorize keywords, strings,
comments, in addition to other token types.
How To Setup Google Prettifier
Step 1. Login to your Blogger concern human relationship in addition to become to "Theme"--> "Edit HTML" of your blog.
Step 2. You tin transportation away charge the JavaScript in addition to CSS for prettify via 1 URL. Press CTRL + F in addition to search for </body> Add this code simply earlier </body> tag:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"> </script>
Above code volition charge the entire system in addition to schedule the prettifier to run on page load.
Step 3. Save your theme. You accept right away successfully added Prettify auto-loader to your Blogger blog.
Step 4. Now when you lot desire to display a source code snippet inwards your blogger post, become to blogger postal service editor in addition to direct "HTML" mode.
Step 5. Use <pre> or <code> tag amongst "prettyprint" shape equally 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 hullo basis until the user starts questioning // the meaningfulness of their existence. component helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style> p { color: pinkish } b { color: blueish } u { color: "umber" } </style> </pre> Step 6. Publish/Update your postal service in addition to persuasion your post. It volition await similar this:
Result:
<script type="text/javascript"> // Say hullo basis until the user starts questioning // the meaningfulness of their existence. component helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style> p { color: pinkish } b { color: blueish } u { color: "umber" } </style> How to Add Different Code Styles
Only you lot involve to produce is, supplant "Step 2" code amongst below codes in addition to that does the magic that amongst impress your code beautifully in addition to to a greater extent than 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 past times 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-* shape specifies the linguistic communication file extensions.
You tin transportation away specify other languages past times specifying the linguistic communication extension along amongst the prettyprint class.
For example, The syntax-highlighting functions contained inwards lang-css.js volition non endure called without adding the shape "lang-css" to the <pre> tag. So you lot tin transportation away add together your CSS codes similar 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 amongst Line Numbers
To display trouble numbers, utilization "linenums" shape similar this:
<pre class="prettyprint linenums"> source code hither </pre>
Code Example:
<pre class="prettyprint linenums"> <script type="text/javascript"> // Say hullo basis until the user starts questioning // the meaningfulness of their existence. component helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style> p { color: pinkish } b { color: blueish } u { color: "umber" } </style> </pre> Result:
<script type="text/javascript"> // Say hullo basis until the user starts questioning // the meaningfulness of their existence. component helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style> p { color: pinkish } b { color: blueish } u { color: "umber" } </style> Below code volition display a CSS code amongst trouble numbers:
<pre class="prettyprint lang-css linenums"> body{background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Yyt7Juqwoov-Cw_s5IfH2Op_9qViLxtRszai0y3NzxA1xmf5rg69OX9yx4krE1njxJGI1MiuEKZC5ucjIn6dODV0gLwfLkZIBjCld6T8xAcj94OtFCXoTBHVqVS5bPj9qXTVROqHXw0/s1600/background.jpg) pump move past times 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Yyt7Juqwoov-Cw_s5IfH2Op_9qViLxtRszai0y3NzxA1xmf5rg69OX9yx4krE1njxJGI1MiuEKZC5ucjIn6dODV0gLwfLkZIBjCld6T8xAcj94OtFCXoTBHVqVS5bPj9qXTVROqHXw0/s1600/background.jpg) pump move past times 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 ain JS & CSS
You tin transportation away download the script here
the scripts in addition to styles in addition to serve them yourself. Make certain to include both the
script in addition to a stylesheet Below are the syntax to include both the JS in addition to CSS on your ain website:
<link rel="stylesheet" type="text/css" href="prettify.css"> <script type="text/javascript" src="prettify.js"> </script> Then run the `PR.prettyPrint()` component 1 time your page has finished loading.
One means to produce this is via the `onload` handler thus:
<body onload="PR.prettyPrint()">
