React.js Blueprint Typography Preformatted text

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Typography Preformatted text. Typography is used to add text in various different ways to design a web page. The React.js Blueprint provides different types of typography that can be used while developing a web application. Preformatted text is used to add inline code elements either of single-line code or multiline code.

React.js BluePrint Typography Preformatted text class:

• .bp4-code: This class is used to add inline code elements. It is mostly used with the <code> tag.
• .bp4-code-block: This class is used to add multiline blocks of code. It is mostly used with the <pre> tag.

Syntax:

<pre class="bp4-code-block">
    <code>
         function() {
              ...
         }
    </code>
</pre>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

Example 1: Below example demonstrates the usage of the .bp4-code class for adding inline code elements.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <div style={{ padding: 20,
            textAlign: "center",
            color: "green" }}>
            <h1>ReactJS BluePrint Typography Preformatted text</h1>
            <div style={{ color: 'black' }}>
                <p>
                    HTML uses different tags which
                    are enclosed with angular brackets as
                    <code class="bp4-code">
                    <h1>
                    </code>
                </p>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of the .bp4-code-block class for adding a multiline block of code elements.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <>
            <div style={{ padding: 20,
                textAlign: "center",
                color: "green" }}>
                <h1>
                    ReactJS BluePrint Typography Preformatted text
                </h1>
            </div>
            <div style={{ color: "black",
                textAlign: 'left',
                padding: 20 }}>
                <pre class="bp4-code-block">
                    <code class="bp4-running-text">
                        <br />
                        const root = ReactDOM.createRoot
                        (document.getElementById('root'));
                        <br />
                        const element = <h6>
                        Hello World </h6>
                    </code>
                </pre>
            </div>
        </>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/typography.preformatted-text