Mostrar bloques de código en línea y multilínea usando Bootstrap

Bootstrap proporciona una serie de 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 estar envuelto en etiquetas <code> . El texto resultante se mostrará en una fuente de ancho fijo y se le dará un color de fuente rojo.
Nota : Las etiquetas <y >deben reemplazarse con < y > respectivamente.

A continuación se muestra un ejemplo que muestra código en línea usando etiquetas <code> en Bootstrap:

<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      
    <title>Displaying Inline Code</title>
</head>
<body>
    <div class="container">
        <h3>Inline Code</h3>
        <p>
            We define paragraphs in HTML using the 
            <code><p></code> tag.
        </p>
    </div>
</body>
</html>

Producción:
Inline Code

Visualización de bloques de código de varias líneas : el código de varias líneas debe estar envuelto en <pre>etiquetas. El texto resultante se mostrará en una fuente de ancho fijo conservando los espacios y los saltos de línea.

La .pre-scrollableclase se puede agregar opcionalmente, lo que establece la altura máxima del elemento en 350 px y agrega una barra de desplazamiento vertical.

A continuación se muestra un ejemplo que muestra un bloque de código:

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      
    <title>Bootstrap Playground</title>
</head>
  
<body>
    <div class="container">
  
    <h3>Code Blocks</h3>
    <!-- This block is not scrollable -->
    <pre>
        <code>
            <!-- Lines of code starts -->
            <h1>Title One</h1>
            <p>A line of sample text</p>
            <p>Another line of sample text</p>
            <p>Yet another line of sample text</p>
            <!-- Lines of code ends -->
        </code>
    </pre>
  
    <h3>Code blocks using .pre-scrollable class</h3>
      
    <!-- This block is vertically scrollable -->
    <pre class="pre-scrollable">
        <code>
            <!-- Lines of Code Starts -->
            <h1>Title One</h1>
            <p>A line of sample text</p>
            <p>Another line of sample text</p>
            <p>Yet another line of sample text</p>
            <!-- Lines of code ends -->
        </code>
    </pre>
    </div>
</body>
</html>

Producción:
Code Blocks

Indicación de salida de muestra : si es necesario mostrar la salida de cualquier programa compilado, en ese caso para indicar la salida de un programa, se puede envolver la salida usando <samp>etiquetas.

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      
    <title>Bootstrap Playground!</title>
</head>
<body>
    <div class="container">
        <h3>Sample Output</h3>
          
        <!-- Below is a sample output text displayed 
            using the samp tags -->
        <samp>
            The sample output text is displayed 
            in a fixed-width font.
        </samp>
    </div>
</body>
</html>

Producción:
Sample Output

Representación de variables : las variables se pueden indicar mediante la <var>etiqueta.

<!DOCTYPE html>
<html>
<head>
    <!-- ADD Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      
    <title>Bootstrap Playground</title>
</head>
  
<body>
    <div class="container">
        <h3>Variables</h3>
        <var>y</var> = <var>m</var><var>x</var> 
                        + <var>c</var>
    </div>
</body>
</html>

Producción:
Variables

Entrada del usuario : la entrada del usuario se puede diseñar usando las <kbd>etiquetas como se muestra en el programa a continuación.

<!DOCTYPE html>
<html>
<head>
    <!-- ADD Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      
    <title>Hello, world!</title>
</head>
  
<body>
    <div class="container">
        <h3>User input</h3>
          
        <!-- In the below tags kbd tags is used to 
              highlight inputs -->
        Type <kbd>ls</kbd> to list all files in the 
        current directory. <br>
        To copy files, select the files and 
        press <kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd><br>
        To paste files, select the files and 
        press <kbd><kbd>ctrl</kbd> + <kbd>v</kbd></kbd><br>
    </div>
</body>
</html>

Producción:
User Input

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta