Spectre Code snippet

Last Updated : 09 Feb, 2022

The code element is used to style the inline code and the code snippet.

In this article, we will learn about the code snippet. The code snippet is the part of the actual code that contains multiple lines of code, so we can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

Spectre Code snippet class:

code: This class is used to place the content as a coding interface.

Syntax:

<pre class="code" >
     <code>...</code>
</pre>

Example: The below example illustrates the Spectre code snippet.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Code Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Code snippet</strong>
        <br><br>
            <pre class="code" data-lang="HTML">
                <h3>Learning Web Development</h3>
                <code>A Computer Science portal for Geeks</code>
            </pre>
     </center>
</body>
 
</html>