Integrating Code Syntax on a Blog or Website.
As a developer, one is used to seeing code snippets formatted in a specific way.
Eg:
Click on Themes, then on Edit HTML.
Step 3) Annotate your code snippets in your posts
In your post, go to the HTML add the below:
<pre class="prettyprint"><code class="language-java">YOUR CODE HERE</code></pre>
Note that the multiple languages are supported.
For more info on Google's Pretty Print, see their Github Repo.
public class FormatCodeClass{
{
public void showFormattedMethod()
{
System.out.println("Yay");
}
}
Step 1) Add the library to your HTML above the <body> tag
Click on Themes, then on Edit HTML.
Search for the <body> tag and copy <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/> above it.
Step 2) Add in your preferred CSS above the </head> tag
<!--Desert theme-->
<style type='text/css'>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}}</style>
For more themes, go to Themes for Google Pretty Print.
For more themes, go to Themes for Google Pretty Print.
Step 3) Annotate your code snippets in your posts
In your post, go to the HTML add the below:
<pre class="prettyprint"><code class="language-java">YOUR CODE HERE</code></pre>
Note that the multiple languages are supported.
For more info on Google's Pretty Print, see their Github Repo.
Comments
Post a Comment