Blaze UI Typography Código en línea y multilínea

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *