How do I make my text in HTML look like the code in here-CodePudding

I am trying to find a way to make my code appear as text in HTML but in the way you see the code on here

I want my code to appear like this on the website

right now when I run the code, I got it to appear as text but it looks like this:

<h1>"this is a heading"</h1>

But I want it to look like this:

<h1>"this is a heading"</h1>

basically, I'm trying to get the code that appears on my website to look like I took a screenshot of the code editor and put it on the site

If you don't understand what I'm trying to ask please ask me and I will try to elaborate further

CodePudding user response：

quick answer will be make a div, give it a specific background color, use overflow properties to make it scrollable. Use monospace font and give specific color and background color. That'll look like a screenshot you took from code editor. but it'll be scrollable and it's necessary if you have a lot of codes.

CodePudding user response：

A simple inline style should be sufficient for a one off but if you wanted to repeat it then defining a class either in the <head> section or by defining the class in a stylesheet and adding a link again in the <head> section would be a better approach.

Classes can be re-used easily and if you need to make changes then you only need to change the class attributes/definition and upon reload you changes are reflected everywhere the class was used/inserted.

This is simplest way for your apparently simple need.

<span style="color="#e4e6e8"><h1>"this is a heading"</h1></span>

To learn more about styling HTML why not follow this link perhaps Styling HTML Elements @ Tutorial Republic (Sadly no affiliation!)

CodePudding user response：

I'm not sure if I understand your question but You can use the <pre>...</pre> tag to obtain code like text :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My document</title>
    <style>
        body{
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
            font-size:16pt;
        }
        pre{
            display:inline-block;
            font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
            padding:20px;
            padding-bottom:0px;
            background-color: #dddddd;
        }
    </style>
</head>

<body>
    <h1>"this is a heading"</h1>
        <p>this is the code : </p>
        <pre>
&lt;h1&gt;"this is a heading"&lt;/h1&gt;
    &lt;p&gt;this is the code : &lt;/p&gt;
    &lt;pre&gt;...&lt;/pre&gt;
        </pre>
</body>
</html>