Skip to main content
davidhelp
davidhelp
Inspiring
May 16, 2021
Answered

How to display css code in an article on a webpage

  • 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:

 
<div id="header">



    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.

     

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

    }


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

     

     

    2 replies

    B i r n o u
    B i r n o u
    Adobe Expert
    May 16, 2021

    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
      davidhelpAuthor
      Inspiring
      May 16, 2021

      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
      Nancy OShea
      Adobe Expert
      May 16, 2021

      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 O'Shea— Product User, Community Expert &amp; Moderator
      BenPleysier
      BenPleysier
      Adobe Expert
      May 16, 2021
      <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!
      davidhelp
      davidhelpAuthor
      Inspiring
      May 16, 2021

      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
      davidhelpAuthor
      Inspiring
      May 16, 2021

       

       

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices