0

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

Zaid Abughuddah
  • 5
  • 3
  • 1
    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 ? https://stackoverflow.com/questions/2820453/how-to-display-raw-html-code-on-an-html-page – Juan Oct 19 '22 at 03:04

3 Answers3

0

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.

Thant Htet Aung
  • 31
  • 1
  • 4
0

<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!)

deemyBoy
  • 65
  • 10
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>
tatactic
  • 1,379
  • 1
  • 9
  • 18
  • You have also the tag... – tatactic Oct 19 '22 at 09:26
  • A very nice example of how to use **classes** and **internal** styles that are placed in the 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 Oct 19 '22 at 12:45
  • Yes, I also always use an external stylesheet and use sass/scss to keep it simple and "DRYer" (DRY = [do not repeat yourself](https://deviq.com/principles/dont-repeat-yourself) – deemyBoy Oct 20 '22 at 01:45
  • how would I make the text be colored automatically like it's in a code editor? – Zaid Abughuddah Nov 02 '22 at 02:12