Open In App

Spectre Code

Improve
Improve
Like Article
Like
Save
Share
Report

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 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=
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</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:

Spectre Code

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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:

Spectre Code

Spectre Code

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



Last Updated : 23 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads