W3CSS Code

It is very important requirement of some website that it should display code snippets. Take example of this website, it has to display lots of code samples along with explanations. It is very easy to display code samples via W3CSS code classes. In this article we shall see these classes in action. We shall study how to display code snippets within a website.

W3CSS Code with w3-code class

The basic class to use when you want to display your code snippet is the w3-code class. Add this class to a div and then inside the div add your code. Take a look at the following example

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-panel w3-card-2 w3-blue">
  <h3>Example</h3>
  <div class="w3-code">
    cars[0] = "Honda";<br>
    cars[1] = "Toyota";<br>
    cars[2] = "Audi";<br>
    cars[3] = "Suzuki";<br>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

In the above code sample, we created a panel and inside that panel we created a div with class “w3-code”. Now we can write our code snippet within this div. We created an array named car and assigned value to its first four indexes. If you open the above page in browser, you should see code wrapped inside a panel.

Highlighting code with “w3-codespan” class

The “w3-codespan” class is used to highlight the code. The technique is to wrap the code inside the “code” tag and then add “w3-codespan” class to the opening code tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-container">

  <p>The <code class="w3-codespan">html, header, body</code> are basic components of a web page..</p>
</div>


</body>
    
</html>

Download the code Try the code

Using W3CSS Color library For Highlighting Code

You can also use W3CSS online color library to highlight your code. The library is a javascript file and is located at “https://www.w3schools.com/lib/w3codecolor.js”. Simply download the file and add it as a script to header section of your code. Next to specify the type of highlighting you can use different classes. The technique is to wrap the code inside a div with class “w3-code”. Next, you add individual classes for javascript, html and css highlighting. For instance for JavaScript highlighting, add “jsHigh” class. Similarly for html and css highlighting add “htmlHigh” and “cssHigh” classes respectively. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="w3codecolor.js"></script>
    
</head>
    
<body>


<div class="w3-code jsHigh">
    cars[0] = "Honda";<br>
    cars[1] = "Toyota";<br>
    cars[2] = "Audi";<br>
    cars[3] = "Suzuki";<br>
  </div>
    
      <div class="w3-code htmlHigh ">
    &lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>
    &lt;title&gt;Knowledge Hills&lt;/title&gt;<br>
    &lt;body&gt;<br><br>
    &lt;h1&gt;Welcome to Knowledge&lt;/h1&gt;<br>
    &lt;p&gt;Best Site for Programming tutorials.&lt;/p&gt;<br><br>
    &lt;/body&gt;<br>
    &lt;/html&gt;
  </div>

 <div class="w3-code cssHigh notranslate">
    body {<br>
    color: #blue;<br>
    }<br><br>

    h2 {<br>
    color: orange;<br>
    text-size: 20px;<br>
    }<br><br>

    p {<br>
    font-weight: bold;<br>
    }
  </div>

</body>
    
</html>

Download the code Try the code

<<< W3CSS Rest, Percentage and Row PaddingW3CSS Accordion >>>