How To Display Code On Your Blog With Syntax Highlighters (easy steps)

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

How To Display Code On Your Blog With Syntax Highlighters (easy steps). Format highlighting helps enhance the readability of the code you display on your current webpages and tends to make the code standout from other text. A amount of excellent Syntax Highlighters are available online for totally free. Google code task “Prettify” and "Highlight" are two excellent, lightweight code highlighters used on your weblog. Both include support for that most commonly used languages.

The Prettify script is usually hosted on Google, so you don't even ought to host it in your end. Simply add the subsequent code before the closing. </head> tag on your template.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">

Tagging code sections:

Syntax Highlighter Prettyprint [images source:own collection]

Now once you display code on your own page, simply enclose that in.<pre>...</pre> <code>...</code> with a class of prettyprint, see an example below:

 <pre class="prettyprint">
...YOU MAY PUT YOUR CODE IN HERE...
</pre>

Should you not like the default skin color, there are 5 other styles you are able to choose from. Available here:

<script codearea2="" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&amp;skin=SKIN_NAME></script>

To pick out a different pores and skin, change skin_name in the code above while using the actual skin label. Available skins contain: doxy, sons-of-obsidian, sunburst as well as desert.

Making use of Highlight. js

The same as Prettify, highlight. js is another excellent syntax highlighter with the web that can be used to make your code look wonderful. Plus, it offers plenty of styles from which to choose. To employ highlight. js, add the next code prior to closing. </head> tag on your template.

<link href="http://yandex.st/highlightjs/8.0/styles/default.min.css" rel="stylesheet"></link>
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoadundefined);</script>

Tagging code sections:

Using the code above will highlight all code you display within
tags in your post

<pre><code>....</code></pre>

Selecting Styles:

You can select from 44 different styles. For available style names look into the highlight.js styles directory (don't forget to add ".min" before ".css").

Once you have selected a style, here's how you can apply it to the code:

<link href="http://yandex.st/highlightjs/8.0/styles/ascetic.min.css" rel="stylesheet" type="text/css"></link>

Your code should currently look nice and standout in the text. See Sample CSS with prettyprint below:

Demo

#menu {
  position: fixed;
  background-color: #181818;
  height: 100%;
  z-index: 10;
  width: 280px;
  color: #eee;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
#menu ul {
  list-style: none;
  margin-top: 0;
  padding: 0
}
#menu ul li { border-bottom: 1px solid #444; }
#menu>ul>li>a { border-left: 4px solid #660000; }
#menu ul li a {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 10px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 600;
}
#menu ul a i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 3px;
  width: 20px;
}
#menu ul a i[class*='fa-caret'] { float: right; }
#menu ul a:hover,
#menu ul a.active {
  background-color: #333;
  border-left-color: #ff6600;
  color: #660000;
}
#menu ul a:hover i:first-child { color: #ff6600; }
/* Submenu */
#menu ul li a.active+ul { display: block }
#menu ul li ul {
  margin-top: 0;
  display: none;
}
#menu ul li ul li { border-bottom: none; }
#menu ul li ul li a { padding-left: 30px; }
#menu ul li ul li a:hover { background-color: #1A1A1A; }
/* show menu */
.left { left: -280px; }
.show { left: 0; }
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #369;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Go to Link