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

Website Showcase for This Week #3

Finally! Another long-awaited showcase of the week! This week, we'll be showcasing Google's new website called Poly . It's basically a website with 3D models for others which will be mainly used for AR/VR games/apps, although you can use these 3D models for other things. You can also upload models to the website as well! There's also editing support for the 3D models and it will also credit the original author if you edit it. I don't think I can add an embed here since Google blocks domains which are not theirs, so... Anyways, check it out! The website's available at poly.google.com . PS. Sorry that I couldn't post another showcase. I was a bit busy doing some open source stuff. So yeah.
Read more

Google Services

This post is meant for those who don't know a thing or two about Google. Forms:  https://docs.google.com/forms/u/0/ Docs:  https://docs.google.com/docs/u/0/ Google+: https://plus.google.com Slides:  https://docs.google.com/presentation/u/0/ Sheets:  https://docs.google.com/sheets/u/0/ Calendar: https://calendar.google.com Gmail: https://mail.google.com/u/0/ Blogger: https://www.blogger.com Drive: https://drive.google.com/u/0/ Hangouts: https://hangouts.google.com Gmail: https://mail.google.com/u/0/ Contacts:  https://contacts.google.com/u/0/preview/all  (preview) or  https://www.google.com/contacts/u/0/?cplus=1#contacts   (original) Play:  https://play.google.com/store?hl=en-GB&tab=C8 Translate:  https://translate.google.com.sg/?hl=en-GB&tab=8T&authuser=0 Maps: https://www.google.com.sg/maps  (Singapore) Keep:  https://keep.google.com/u/0/ YouTube: https://youtube.com Inbox:  https://inbox.goo...
Read more