Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Typography Inline y Multiline Code nos permiten diseñar el código que escribimos en nuestras páginas web. El código en línea se usa cuando queremos mencionar algunas etiquetas o nombrar una sola palabra clave en un sitio web, mientras que el código multilínea se usa para mostrar un código de ejemplo.
Blaze UI Typography Clases de código en línea y multilínea:
- u-code: este es el valor predeterminado para el código en línea y proporciona el CSS para los códigos en línea.
- u-code–multiline: esto es necesario para el código de varias líneas y los estilos correspondientes.
Sintaxis :
<!-- Inline Code -->
<code class="u-code">
...
</code>
<!-- Multiline Code -->
<code class="u-code u-code--multiline">
...
</code>
Ejemplo 1: En el siguiente ejemplo, tenemos un texto con un código en línea.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="0-container"> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Blaze UI Typography Inline and Multiline code</strong> <br><br> <b>Inline code</b> <p>The<code class="u-code">center</code> tag is used in html for aligning the items in center </p> <p>We use<code class="u-code">style</code> attribute to style different elements in HTML. </p> </center> </div> </body> </html>
Producción
Blaze UI Typography Código en línea y multilínea
Ejemplo 2: el siguiente ejemplo demuestra el uso del código multilínea en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks | BlazeUI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"
/>
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
</head>
<body>
<div class="0-container">
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Blaze UI Typography Inline and Multiline code</strong>
<br />
<br />
<b>Multiline code</b>
<p>The following code prints hello world in python</p>
<code class="u-code u-code--multiline">print('hello world')</code>
<p> The <code class="u-code">print</code>
function can print string,list,tuple,boolean etc. in python3.
</p>
</center>
</div>
</body>
</html>
Producción
Blaze UI Typography Código en línea y multilínea
Referencia: https://www.blazeui.com/components/typography/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA