Spectre Code

Spectre Code is used for styling inline and multi-line code snippets. Inline code is a line of the actual code. For inline code, you can use the <code> element. 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 Types:

Spectre Inline code: There is no predefined class for this, we can use the <code> tag for the inline code.
Spectre Code snippet: This is used to place the content as a coding interface.

Spectre Code Class:

code: This is used in pre tag gives the spectre design on the pre tag content.

Syntax:

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

The below example illustrates the Spectre Code:

Example 1: In this example, we will create Spectre Inline code.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Inline Code</strong>
        <br><br>
        <div>
            <code>A Computer Science portal for Geeks</code>
        </div>
    </center>
</body>

</html>

Output:

Example 2: In this example, we will create a Spectre Code snippet.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/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>

Output:

Reference: https://picturepan2.github.io/spectre/elements/code.html

Explore