Blaze UI Typography Inline and Multiline code

Last Updated : 18 May, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

Blaze UI Typography Inline and Multiline code allow us to style the code that we write on our web pages. The inline code is used when we want to mention some tags or name a single keyword in a website whereas the multiline is used to show an example code.

Blaze UI Typography Inline and Multiline code classes:

u-code: This is the default for the inline code and provides the CSS for the inline codes.
u-code–multiline: This is required for multiline code and styles accordingly.

Syntax:

<!-- Inline Code -->
<code class="u-code">
      ...
</code>

<!-- Multiline Code -->
<code class="u-code u-code--multiline">
      ...
</code>

Example 1: In the following example, we have some text with an inline code.

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>

Output

Blaze UI Typography Inline and Multiline code

Example 2: The following example, demonstrates the use of Multiline code in Blaze UI.

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>