Use the AMP version for mobile for faster loading and less memory requirements - but without large images and maps
Prism, from http://prismjs.com/
The following frame displays an HTML page that is using Prismjs to display code:
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
Another widely used library is
The content to be displayed in this way is enclosed in <pre class="prettyprint linenums"><code></code></pre> tags.
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.
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.