Inspiring

Answered

How to display css code in an article on a webpage

Forum|Forum|4 years ago
May 16, 2021
2 replies
1879 views

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:

This topic has been closed for replies.

Correct answer B i r n o u

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

I would never have thought of using characters like that.

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;

}

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

so instead of using

you should use (as an habbit)

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; 
        }

B i r n o u

Community Expert

are you looking to write explicitly

did you try in code view

to get in browser

davidhelpAuthor

Inspiring

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;

</code>
</pre>

Nancy OShea

Community Expert

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.

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

Nancy O'Shea— Product User, Community Expert & Moderator

BenPleysier

Community Expert

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

davidhelpAuthor

Inspiring

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.

davidhelpAuthor

Inspiring

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded