Spectre Code
Last Updated :
23 Feb, 2022
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
Reference: https://picturepan2.github.io/spectre/elements/code.html
Share your thoughts in the comments
Please Login to comment...