W3.CSS proporciona varias clases para mostrar bloques de código en línea y de varias líneas.
Mostrar código en línea: el código en línea debe incluirse en etiquetas <code> con w3-codespan como clase. El texto resultante se mostrará en una fuente de ancho fijo y se le dará un color de fuente rojo con un fondo gris claro.
Nota: Las etiquetas < y > deben reemplazarse con < y > respectivamente.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Inline Code in W3.CSS --> <div class="w3-container"> <h3 class="w3-text-blue">Inline Code:</h3> <p> We define paragraphs in HTML using the <code class="w3-codespan"><p></code> tag. </p> </div> </body> </html>
Producción:
Visualización de bloques de código multilínea: el código multilínea debe estar envuelto en etiquetas <div> con clase w3-code . El texto resultante se mostrará en una fuente legible monoespaciada con espacios y saltos de línea conservados.
Nota: Las etiquetas < y > deben reemplazarse con < y > respectivamente.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Multiline Code Block in W3.CSS --> <div class="w3-container"> <h3 class="w3-text-blue"> Multiline Code Block: </h3> <div class="w3-code notranslate w3-card"> <!-- Lines of code starts --> <h1>Title One</h1> <br> <p>A line of sample text</p> <br> <p>Another line of sample text</p> <br> <p>Yet another line of sample text</p> <!-- Lines of code ends --> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA