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

Question

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

is it the background color and the different font family that you want for your raw code or is this what you're looking for ? stackoverflow.com/questions/2820453/… — Juan
– Juan, Commented Oct 19, 2022 at 3:04

Thant Htet Aung · Accepted Answer · 2022-10-19 03:04:13Z

1

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.

answered Oct 19, 2022 at 3:04

Thant Htet Aung

411 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deemyBoy · Accepted Answer · 2022-10-20 01:38:25Z

<h1><span style="background-color: #e4e6e8;">"this is a heading"</span>
</h1>

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.

<h1><span style="background-color: #e4e6e8;">"this is a heading"</span></h1>

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

tatactic · Accepted Answer · 2022-10-20 11:02:07Z

0

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>
<script>
    function escapeHTML(html){
        const chars = {'<':'&lt;','>':'&gt;'};
        let s = html;
        s = s.replace(/[<>]/g, m => chars[m]);
        return(s + "<br>");
    }
</script>
</head>

<body>
<h1 style="font-size:1.6em">"Title"</h1>
  <div style="font-size:1.4em">code</div>
    <pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">
      Your code is written here
    </pre>
    <script>
        let display = document.getElementById("output");
        display.innerHTML = escapeHTML('<h1 style="font-size:1.6em">"Title"</h1>');
        display.innerHTML += escapeHTML('  <div style="font-size:1.4em">code</div>');
        display.innerHTML += escapeHTML('    <pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">');
        display.innerHTML += escapeHTML('      Your code is written here');
        display.innerHTML += escapeHTML('    </pre>');
    </script>
</body>
</html>

edited Oct 20, 2022 at 11:02

answered Oct 19, 2022 at 6:17

tatactic

1,3791 gold badge9 silver badges18 bronze badges

4 Comments

tatactic Over a year ago

You have also the <code> tag...

deemyBoy Over a year ago

A very nice example of how to use classes and internal styles that are placed in the <head> section of a webpage. This type of usage is also called embedded because the code is embedded with in the page it is styling.

deemyBoy Over a year ago

Yes, I also always use an external stylesheet and use sass/scss to keep it simple and "DRYer" (DRY = do not repeat yourself

Zaid Abughuddah Over a year ago

how would I make the text be colored automatically like it's in a code editor?

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related