Code Snippet of the Week | code / pre Elements

Another code snippet! This week, I'll be covering how to create code snippets with the <code> and <pre> HTML tags.

Note: If you haven't seen it, I've designed an image for these kind of posts! Look out for posts with the image on the top of the post!

Table Of Contents

Getting Started

To get started, ensure that you have a code editor (ideally Visual Studio Code, Sublime Text, Atom, etc.).
  1. Get started by downloading either of the coding editors as stated above (or you can search some online; DON'T USE YOUR BUILT-IN NOTEPAD/TEXTEDIT!!)
  2. Next, open up the code editor and create a new file. We'll name the file index.html
  3. 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
    
    okay too -->
    
</head>
    
<body>
    
    <!-- Your page content goes here -->
    
    <p>Hello, world!</p>
    
</html>

Creating code

To create code, surround some text with <code> (which can be optionally nested within a <pre>)


<pre><code>Hello, World! Here is some useful content in a code block!</code></pre>

See the MDN web docs for more info: <code> <pre>

Highlight.js Example

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>

Demo

Here's a working demo for you to play with!

See the Pen Code/ Pre Element by Edric Chan (@Chan4077) on CodePen.

View Demo

Comments

Post a Comment

Popular posts from this blog

Code Snippet of The Week | Unordered and Ordered lists

Yes, it's a code snippet! You heard that right. I'll be trying to create a code snippet with pure HTML. (You can view the source code by pressing Cmd + Option + U or Ctrl + U if you're on the desktop.) Toggle Table of Contents Table Of Contents Table of Contents Notices Getting Started Creating an unordered list Creating an ordered list Demo Notices I won't show the getting started section again anymore after this. I'll be using a tab indent of 4 spaces. You can use any code indent you want. (To format a document in Visual Studio Code, use Shift + Option + F I'm assuming you have a computer. (If you don't have one, then...) Getting Started To get started, ensure that you have a code editor (ideally Visual Studio Code , Sublime Text , Atom , etc.). Get started by downloading either of the coding editors as stated above (or you can search some online; DON'
Read more