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/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" >w3wiki</ h1 > < strong >SPECTRE Inline Code</ strong > < br >< br > < div > < code >A Computer Science portal for Beginner</ 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/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" >w3wiki</ 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 Beginner</ code > </ pre > </ center > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/elements/code.html