Spectre Code se utiliza para diseñar fragmentos de código en línea y de varias líneas. El código en línea es una línea del código real. Para el código en línea, puede usar el elemento <code> . El fragmento de código es la parte del código real que contiene varias líneas de código, por lo que podemos usar <pre> con la clase de código como contenedor y agregar <code> dentro. El atributo data-lang se representa como el nombre del idioma en la parte superior derecha.
Tipos de códigos de espectro:
- Código en línea de Spectre: no hay una clase predefinida para esto, podemos usar la etiqueta <code> para el código en línea.
- Fragmento de código de Spectre: se utiliza para colocar el contenido como una interfaz de codificación.
Clase de código de espectro:
- código: Esto se usa en la etiqueta previa y proporciona el diseño de espectro en el contenido de la etiqueta previa.
Sintaxis:
<pre class="code">
<code>...</code>
</pre>
El siguiente ejemplo ilustra el Código Spectre:
Ejemplo 1: en este ejemplo, crearemos el código Spectre Inline.
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">GeeksforGeeks</h1> <strong>SPECTRE Inline Code</strong> <br><br> <div> <code>A Computer Science portal for Geeks</code> </div> </center> </body> </html>
Producción:
Código de espectro
Ejemplo 2: en este ejemplo, crearemos un fragmento de código de Spectre.
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">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>
Producción:
Código de espectro
Referencia: https://picturepan2.github.io/spectre/elements/code.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA