Code snippet of the week - code/pre elements
Note: This blog post originally appeared on my blog.
Another code snippet! This week, I’ll be covering how to create code snippets with the
<pre> HTML tags.
Note: If you haven’t seen it, I’ve designed a new header image for these kind of posts! Look out for posts with the image on the top of the post!
- Get started by downloading either of the coding editors as stated above (or you can search some online; don’t use your built-in text editor as this may screw things up in the encoding)
- Next, open up the code editor and create a new file. We’ll name the file
Create the bare minimal for an HTML file. Copy the code below:
<!DOCTYPE html> <!-- This is the line that is required in order for the page to work properly. --> <html> <head> <meta charset="UTF-8"> <title>Document title</title> <!-- I'm a comment! --> <!-- Multiline comments are<br> okay too --> </head> <body> <!-- Your page content goes here --> <p>Hello, world!</p> </html>
To create code, surround some text with
<code> (which can be optionally nested within a
<pre><code>Hello, World! Here is some useful content in a code block!</code></pre>
See the MDN web docs for more info:
This example assumes that you’ve included Highlight.js and that you’ve initialized Highlight.js in your main HTML file.
<pre><code class="lang-html"> &lt;p&gt;Displaying a code snippet within an actual code snippet? Codeception!&lt;/p&gt; </code></pre>
Here’s a working demo for you to play with!