Tutorial: How to display code in web pages
Three different methods are described and explained, prism.js, google pretty print, and pure CSS.
pageid = 4810 parentid = 7712
Many websites that display code listings will use a Javascript library to do this.
Prism, from http://prismjs.com/
The following frame displays an HTML page that is using Prismjs to display code:
Using prism.js
The HTML code for the page using prism.js
We have downloaded the prism.js and prism.css code and then placed those two files on our server. The content to be displayed in this way is enclosed in <code></code> tags. There are many options to select including a line numbering plugin. Which needs to be enclosed in <pre class="line-numbers"></pre> tags
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Code display using Prismjs</title>
<link rel="stylesheet" href="prism.css">
<script src="prism.js"></script>
</head>
<body>
<h1>Code display using Prismjs</h1>
<h2>With line numbers plugin</h2>
<pre class="line-numbers">
<code class="language-js">
$(function() {
"use strict";
$("#div1").resizable();
$("#div2").resizable();
$("#topmenu").resizable();
$("#topmenu").resize(function() {
$("#div2").height($("#parent").height() - $("#topmenu").height());
$("#div1").height($("#parent").height() - $("#topmenu").height());
});
$("#div1").resize(function() {
$("#div2").width($("#parent").width() - $("#div1").width());
});
$("#div2").resize(function() {
$("#div1").width($("#parent").width() - $("#div2").width());
});
$(window).resize(function() {
$("#div2").width($("#parent").width() - $("#div1").width());
$("#div1").height($("#parent").height() - $("#topmenu").height());
$("#div2").height($("#parent").height() - $("#topmenu").height());
});
});
</code>
</pre>
<pre class="line-numbers">
<code class="language-css">
#parent {
position: absolute;
height: 100vh;
margin: 0;
padding: 0;
width: 98%;
}
#div1 {
position: relative;
display: block;
float: left;
width: 50%;
background-color: #A2A;
overflow: auto;
}
#div2 {
display: block;
background-color: #BBB;
overflow: auto;
}
#topmenu {
position: relative;
width: 100%;
height: calc(98vh /8);
overflow: auto;
}
.content {
margin: 10px;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
html {
overflow: hidden;
}
.scale {
position:absolute;
height:30px;
margin:0;
padding:0;
width:100%;
left: 0;
bottom: 0;
z-index: 1000;
}
.vscale {
position:absolute;
height:100%;
margin:0;
padding:0;
width:30px;
left: 0;
top: 0;
z-index: 1000;
}
</code>
</pre>
</body>
</html>
Another widely used library is
https://github.com/google/code-prettify
Using prettify
The HTML Code
The content to be displayed in this way is enclosed in <pre class="prettyprint linenums"><code></code></pre> tags.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line numbers with Google Prettyprint</title>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}
</style>
</head>
<body>
<h1>Code display using Google Prettyprint</h1>
<pre class="prettyprint linenums">
<code >$(function() {
"use strict";
$("#div1").resizable();
$("#div2").resizable();
$("#topmenu").resizable();
$("#topmenu").resize(function() {
$("#div2").height($("#parent").height() - $("#topmenu").height());
$("#div1").height($("#parent").height() - $("#topmenu").height());
});
$("#div1").resize(function() {
$("#div2").width($("#parent").width() - $("#div1").width());
});
$("#div2").resize(function() {
$("#div1").width($("#parent").width() - $("#div2").width());
});
$(window).resize(function() {
$("#div2").width($("#parent").width() - $("#div1").width());
$("#div1").height($("#parent").height() - $("#topmenu").height());
$("#div2").height($("#parent").height() - $("#topmenu").height());
});
});
</code>
</pre>
<pre class="prettyprint linenums">
<code >
#parent {
position: absolute;
height: 100vh;
margin: 0;
padding: 0;
width: 98%;
}
#div1 {
position: relative;
display: block;
float: left;
width: 50%;
background-color: #A2A;
overflow: auto;
}
#div2 {
display: block;
background-color: #BBB;
overflow: auto;
}
#topmenu {
position: relative;
width: 100%;
height: calc(98vh /8);
overflow: auto;
}
.content {
margin: 10px;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
html {
overflow: hidden;
}
.scale {
position:absolute;
height:30px;
margin:0;
padding:0;
width:100%;
left: 0;
bottom: 0;
z-index: 1000;
}
.vscale {
position:absolute;
height:100%;
margin:0;
padding:0;
width:30px;
left: 0;
top: 0;
z-index: 1000;
}
</code>
</pre>
</body>
</html>
Neither of these makes it easy to display HTML code with line numbers.
These predate the ability of HTML and CSS to display line numbers and syntax highlighting.
When using CSS to display line numbers, <code> or <div class="mycode"> can be used to identify each line of code. However if you want users to be able to copy and paste code from the web page into an editor, test your choice to make sure that copy and paste doesn't remove the new line characters!
The attached example uses <div class="code"> for each line.
Using CSS to display code
The HTML to display code in the page using CSS looks a little more complicated in the next example - but note that the complexity here is because we are displaying syntax highlighted HTML code exported from an HTML editor. It is created by placing <div class="code"> and </div> to wrap each line of code.
The display is created by the CSS for the class .code
Each block of code is enclosed by <section> tags, and the css for this re-sets a counter. This counter is then incremented and displayed for each line of the "code" class.
The big advantage of using CSS in this way is that you can add other information to the code, but the user can still copy and paste the code from the screen.
section {
counter-reset: section; /* Counter for section is set */
}
.code {
overflow-wrap;
font-size: 12pt;
background-color: #d3d3d3 ;
margin: 0 !important;
}
.code::before { /* For code line a counter is incremented and added before the start of the paragraph. */
display:inline-block;
width:2em;
border-right: 1px black solid;
padding-right: 1em;
margin-right: 1em;
counter-increment: section;
content: counter(section) "" ;
font-size: 12pt;
color: darkgreen;
background-color: #d3d3d3 ;
}
<section>
<div class="code"><span class="style_21"><! </span> <span class="style_26"> doctype html </span> <span class="style_21"> > </span></div>
<div class="code"><span class="style_1"><html </span> <span class="style_3"> lang </span> <span class="style_8"> = </span> <span class="style_6"> "en" </span> <span class="style_1"> > </span></div>
<div class="code"><span class="style_1"><head> </span></div>
<div class="code"> <span class="style_1"> <meta </span> <span class="style_3"> charset </span> <span class="style_8"> = </span> <span class="style_6"> "utf-8" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <meta </span> <span class="style_3"> name </span> <span class="style_8"> = </span> <span class="style_6"> "viewport" </span> <span class="style_3"> content </span> <span class="style_8"> = </span> <span class="style_6"> "width=device-width, initial-scale=1" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <title> </span> <span class="style_0"> CSS Resizable </span> <span class="style_1"> </title> </span></div>
<div class="code"> <span class="style_1"> <link </span> <span class="style_3"> rel </span> <span class="style_8"> = </span> <span class="style_6"> "stylesheet" </span> <span class="style_3"> href </span> <span class="style_8"> = </span> <span class="style_6"> "resizeable.css" </span> <span class="style_1"> > </span></div>
<div class="code"><span class="style_1"></head> </span></div>
<div class="code"><span class="style_1"><body> </span></div>
<div class="code"> <span class="style_1"> <div </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> "parent" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <div </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> "topmenu" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <h1> </span> <span class="style_0"> CSS Resizeable </span> <span class="style_1"> </h1> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is the top menu. Drag the bottom border of this pane. </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is the top menu </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is the top menu </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> </div> </span></div>
<div class="code"> <span class="style_1"> <div </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> "div1" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <div </span> <span class="style_3"> class </span> <span class="style_8"> = </span> <span class="style_6"> "content" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the left hand pane. Drag the right hand border of this pane. </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the left hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the left hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> </div> </span></div>
<div class="code"> <span class="style_1"> </div> </span></div>
<div class="code"> <span class="style_1"> <div </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> "div2" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <div </span> <span class="style_3"> class </span> <span class="style_8"> = </span> <span class="style_6"> "content" </span> <span class="style_1"> > </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the right hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the right hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the right hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the right hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the right hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> <p> </span> <span class="style_0"> This is text in the right hand pane </span> <span class="style_1"> </p> </span></div>
<div class="code"> <span class="style_1"> </div> </span></div>
<div class="code"> <span class="style_1"> </div> </span></div>
<div class="code"> <span class="style_1"> </div> </span></div>
<div class="code"><span class="style_1"></body> </span></div>
</section>
---
