Tutorial: How to display code in web pages

Three different methods are described and explained, prism.js, google pretty print, and pure CSS.

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">&lt;! </span> <span class="style_26"> doctype&nbsp;html </span> <span class="style_21"> &gt; </span></div>
<div class="code"><span class="style_1">&lt;html&nbsp; </span> <span class="style_3"> lang </span> <span class="style_8"> = </span> <span class="style_6"> &quot;en&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code"><span class="style_1">&lt;head&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;meta&nbsp; </span> <span class="style_3"> charset </span> <span class="style_8"> = </span> <span class="style_6"> &quot;utf-8&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;meta&nbsp; </span> <span class="style_3"> name </span> <span class="style_8"> = </span> <span class="style_6"> &quot;viewport&quot;&nbsp; </span> <span class="style_3"> content </span> <span class="style_8"> = </span> <span class="style_6"> &quot;width=device-width,&nbsp;initial-scale=1&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;title&gt; </span> <span class="style_0"> CSS&nbsp;Resizable </span> <span class="style_1"> &lt;/title&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;link&nbsp; </span> <span class="style_3"> rel </span> <span class="style_8"> = </span> <span class="style_6"> &quot;stylesheet&quot;&nbsp; </span> <span class="style_3"> href </span> <span class="style_8"> = </span> <span class="style_6"> &quot;resizeable.css&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code"><span class="style_1">&lt;/head&gt; </span></div>
<div class="code"><span class="style_1">&lt;body&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;div&nbsp; </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> &quot;parent&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;div&nbsp; </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> &quot;topmenu&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;h1&gt; </span> <span class="style_0"> CSS&nbsp;Resizeable </span> <span class="style_1"> &lt;/h1&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;the&nbsp;top&nbsp;menu.&nbsp;Drag&nbsp;the&nbsp;bottom&nbsp;border&nbsp;of&nbsp;this&nbsp;pane. </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;the&nbsp;top&nbsp;menu </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;the&nbsp;top&nbsp;menu </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;/div&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;div&nbsp; </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> &quot;div1&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;div&nbsp; </span> <span class="style_3"> class </span> <span class="style_8"> = </span> <span class="style_6"> &quot;content&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;left&nbsp;hand&nbsp;pane.&nbsp;Drag&nbsp;the&nbsp;right&nbsp;hand&nbsp;border&nbsp;of&nbsp;this&nbsp;pane. </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;left&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;left&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;/div&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;/div&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;div&nbsp; </span> <span class="style_3"> id </span> <span class="style_8"> = </span> <span class="style_6"> &quot;div2&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;div&nbsp; </span> <span class="style_3"> class </span> <span class="style_8"> = </span> <span class="style_6"> &quot;content&quot; </span> <span class="style_1"> &gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;right&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;right&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;right&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;right&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;right&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;p&gt; </span> <span class="style_0"> This&nbsp;is&nbsp;text&nbsp;in&nbsp;the&nbsp;right&nbsp;hand&nbsp;pane </span> <span class="style_1"> &lt;/p&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;/div&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;/div&gt; </span></div>
<div class="code">&nbsp;&nbsp;&nbsp;&nbsp; <span class="style_1"> &lt;/div&gt; </span></div>
<div class="code"><span class="style_1">&lt;/body&gt; </span></div>
</section>
 

---

Image of code in web pages using css