XYZ CODE: How to add code line numbers in your blogger post

Back>

When you need to include code snippets in your blogger post, chances are, you'd like to talk about the code. Having line number for the code make this job easy. You just need some css and javascript tricks to add line numbers in the <pre> </pre>.

Example

<main>

<figure>
<figcaption>HeapSort.java</figcaption>
<pre><code contenteditable="false" tabindex="0" spellcheck="false">
public class HeapSort
{
public static void sort(int[] a)
{
int N = a.length;
for (int k = N/2; k >= 1; k--)
sink(a, k, N);
while (N > 1)
{
exch(a, 1, N--);
sink(a, 1, N);
}
}
private void sink(int[] arr, int k, int N)
{
while(2*k <= N)
{
int j = 2*k;
if (j < N && arr[j - 1] < arr[j])) j++;
if (arr[k - 1] >= arr[j - 1]) break;
k = j;
}
}
private void exch(int[] arr, int i, int j)
{
int tmp = arr[?];
arr[j - 1] = ?;
arr[?] = tmp;
}
}

</code></pre>
</figure>

</main>

<style>

main {
display: block;
width: 95%;
min-width: 18em;
margin: 2em auto;
}

figure {
display: block;
margin: 1em 0;
width: 100%;
color: #9e9e9e;
border: 1px solid #111;
border-radius: 3px;
background: rgb(22, 22, 22);
}

figure figcaption {
display: block;
font-family: sans-serif;
padding: 5px 10px 4px 10px;
border-bottom: 1px solid #111;
border-radius: 3px 3px 0 0;
font-weight: bold;
font-variant: small-caps;
background: #111;
color: #9e9e9e;
}

.numbers {
cursor: context-menu;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
}

pre,
pre * {
font: normal normal normal 1em/1.4 monaco, courier, monospace;
}

pre {
font-size: 0.8em;
}

pre,
pre code,
pre samp {
display: block;
margin: 0;
cursor: text;
}

pre code,
pre samp {
/* enforce white-space for IE7 */
white-space: pre;
/* enforce word-wrap for mobile safari */
word-wrap: normal;
padding: 10px;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
overflow-x: auto;
box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, 0.5);
}

/* additional focus rules to provide a visual cue */

pre [contenteditable]:focus {
border-radius: 0 0 3px 0;
background: #fff;
outline: none;
background: rgb(22, 22, 22);
box-shadow: inset 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}

pre.line-numbers {
position: relative;
}

pre.line-numbers code,
pre.line-numbers samp {
margin-left: 3em;
border-left: 1px solid #000;
}

pre.line-numbers > div {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 0 0 0 3px;
overflow: hidden;
counter-reset: line;
}

pre.line-numbers > div > span {
display: block;
width: 2.5em;
padding: 0 0.5em 0 0;
text-align: right;
color: #777;
overflow: hidden;
counter-increment: line;
}

pre.line-numbers > div > span::before {
content: counter(line);
}

pre.line-numbers > div > span:first-child {
margin-top: 10px;
}

pre.line-numbers > div > span:nth-child(odd) {
background: #111;
}

@media print {
pre code {
overflow-x: visible;
white-space: pre-wrap;
}
pre.line-numbers div {
display: none;
}
pre.line-numbers > code,
pre.line-numbers > samp {
margin-left: 0;
}
}

code.hljs {
padding-top: 10px;
}
/* double-up the syntax elements for cross-browser RTF-keystroke support */

pre b,
pre strong {
font-weight: normal;
color: #039;
}

pre u,
pre u b,
pre u strong {
text-decoration: none;
color: #083;
}

pre i,
pre em,
pre i *,
pre em *,
pre i * *,
pre em * * {
letter-spacing: -0.1em;
text-decoration: none;
font-style: normal;
color: #c55;
}

.hljs {
color: #a9b7c6;
background: rgb(22, 22, 22);
display: block;
overflow-x: auto;
padding: 0.5em;
}

.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
color: #FF8040;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
color: #569CD6;
}

.hljs-variable,
.hljs-template-variable,
.hljs-link {
color: #FF8040;
}

.hljs-comment,
.hljs-quote {
color: #57A64A;
}

.hljs-meta {
color: #D2A8A1;
}

.hljs-string,
.hljs-attribute,
.hljs-addition {
color: #FF0000;
}

.hljs-section,
.hljs-title,
.hljs-type {
color: #ffc66d;
}

.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #e8bf6a;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-strong {
font-weight: bold;
}
</style>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
(function() {
for (var tags = ['div', 'figure', 'figcaption'], i = 0; i < tags.length; i++) {
document.createElement(tags[i]);
}
})();

(function() {
//filter IE8 and earlier which don't support the generated content
if (typeof(window.getComputedStyle) == 'undefined') {
return;
}

//get the collection of PRE elements
var pre = document.getElementsByTagName('pre');
//now iterate through the collection
for (var len = pre.length, i = 0; i < len; i++) {
//get the CODE or SAMP element inside it,
//or just in case there isn't one, continue to the next PRE
var code = pre[i].getElementsByTagName('code').item(0);
if (!code) {
code = pre[i].getElementsByTagName('samp').item(0);
if (!code) {
continue;
}
}

//create a containing DIV column (but don't append it yet)
//including aria-hidden so that ATs don't read the numbers
var column = document.createElement('div');
column.setAttribute('aria-hidden', 'true');
column.setAttribute('class', 'numbers');

//split the code by line-breaks to count the number of lines
//then for each line, add an empty span inside the column
for (var n = 0; n < code.innerHTML.split(/[\n\r]/g).length; n++) {
column.appendChild(document.createElement('span'));
}

//now append the populated column before the code element
pre[i].insertBefore(column, code);

//finally add an identifying class to the PRE to trigger the extra CSS
pre[i].className = 'line-numbers';
}

})();
</script>