How to display css code in an article on a webpage

[davidhelp]

Hello

How to display css code as plain text on a webpage without the browser thinking it is code to use?

If I use <div id="header"> the page will break but if I use < div id="header"> with the caret having a space before the div name then it displays ok.

Example of what I want as I am writing notes to myself to explain the process of making a webpage:

 
<div id="header">

[BenPleysier]

<pre>
  <code>
    p { color: red; }
    body { background-color: #eee; }
  </code>
</pre>

[davidhelp]

Thanks but.....   : )

I want to show the code like <br> or <strong> or <div id="header">

If the carets are there then the page either does not show anything or gets messed up.

I can display the css:  #article { grid-area: article;

But not the html:  <li><a class="active" href="#home">Menu</a></li>

without it showing me in that case a menu.

I have the grey box. I also notice it I have more text then it goes outside the box.

[davidhelp]

pre code {
background-color: #eee;
color: #000000;
border: 2px solid #000000;
display: block;
padding: 15px;
width: 70%;
margin: 10px;
}

[BenPleysier]

Sorry, you are confusing me. Have a look at the subject line.

[B i r n o u]

are you looking to write explicitly

<div id="header">

did you try in code view

&lt;div id=&quot;header&quot;&gt;

to get in browser

<div id="header">

[davidhelp]

I want this as an example to showup as:  <div id="header">

You can see in the example1 screenshot the #article line but the <div id="header"> with <  >

will create 2nd box and a mess. example 2 is when I add a space < div id="header">

How to display the without having to add a space?

<pre>
<code>
#article { grid-area: article;

<div id="header">

</code>
</pre>

[Nancy OShea · Accepted solution]

If I understand you correctly, you want to write readable code examples that display like code in a browser but don't execute.  See screenshot.  Switch to Design View (Ctrl + Shift + F11).

Copy & paste this into Code View.

<div class="col">
<h3>Code Example:</h3>
<p><code>&lt;div id="header"&gt;<br>
Something here...<br>
&lt;/div&gt;</code></p>
</div>

Pasted into this forum's HTML produces this result:

Code Example:

<div id="header"> Something here... </div>

Hope that helps.

[Nancy OShea]

Alternatively, do what CSS Tricks and other developers do: Use  Code Pen or JS Fiddle.

Embed your "pens" and "fiddles" into web pages with copy & paste. 

• https://blog.codepen.io/documentation/embedded-pens/
• https://docs.jsfiddle.net/embedding-fiddles

If that's not what you're looking for, please post an online example of what you are looking for.

[davidhelp]

Thanks.  I used what you posted and that was the fix  : )

I would never have thought of using characters like that.

<code>
&lt;div id="header"&gt;
</code>

Afterward I did a search and found a link to this that explains those odd symbols to use.

https://www.w3schools.com/html/html_entities.asp

Issue:  I have an issue though with the text going past the div for the pre code.

Question:  Is there a fix for that?
See screenshot.

pre code {
background-color: #eee;
color: #000000;
border: 2px solid #000000;
display: block;
padding: 10px;
width: 60%;
margin-left: 30px;
margin-right: 30px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 20px;

}

[B i r n o u · Accepted solution]

well , as I said in my eralier post, you should also use entity por the quote inside your code.

so instead of using

&lt;div id="header"&gt;

you should use (as an habbit)

&lt;div id=&quot;header&quot;&gt;

now for the text overflow concerning the PRE tag, in fact the PRE tag is 100%, and you should control, it's own CSS (concerning WIDTH and WRAPPING),

not focus on the PRE CODE selector, but on the PRE selector

so try sometning like

        pre {	
            width: 200px;
            white-space: pre-wrap; 
            word-wrap: break-word; 
        }

[davidhelp]

Thanks again. That worked. The texy now wraps to the next line.

[Liam Dilley]

As another option https://prettier.io/ Prettier is by far still the best adapter to make code look like it does in editors for your solutions. Used by many web code guide sites and online applications that have online code editors.

[B i r n o u]

but, isn't Prettier a code formater, for code editor ?... I think what the OP was querying was a solution to present code in within an HTML page rendered by the browser. I didn't dig enought into Prettier, but do you think that Prettier can handle that?

it's a question, not a sarcasm