Tuesday

What is the correct way to use PRE or CODE tags with a OL list inside

Issue

The best way is to give an example.

<!DOCTYPE html>
<HTML lang="en">

<HEAD>
  <TITLE>PRE - CODE - OL test</TITLE>
</HEAD>

<BODY>
  <PRE><CODE>
    <OL>
    <LI></LI>
    </OL>
    </CODE></PRE>
  <PRE>
    <OL>
    <LI></LI>
    </OL>
    </PRE>
  <CODE>
    <OL>
    <LI></LI>
    </OL>
    </CODE>
</BODY>

</HTML>

The html validator tool returns:

":8.1-8.4: error: Element “ol” not allowed as child of element “code” in this context.
":12.6-13.4: error: Element “ol” not allowed as child of element “pre” in this context.
":18.1-18.4: error: Element “ol” not allowed as child of element “code” in this context.

Now, the document I'm creating displays exactly the way it should in Firefox and Edge, so I don't see a problem other than the syntax isn't valid HTML. So, how do I achieve the same result with valid HTML?

Edit: For those who want to see what my actual document looks like, here is the link. Be aware, the document is over 100K in size.

Edit:

ksav provided the clues and help necessary to fix my issue. my document will now pass muster with the HTML validator. But there was one small issue that I had to find an answer to.

When I had a line such as:

// some code;

The // part had to be made blue to match what the page looked like before. Easy enough. The some code; part, though, was supposed to be red. Also easy enough. However, because I use spans to apply color to text not associated with any other tag to apply style to, a line number was being added to that part separately. This meant the displayed text looked like this:

25 // 26 some code;

Obviously, that is not the intended result. Well, the first thing I found was a way to keep the number on the red text from incrementing. That CSS is:

code>span:not(.spr) {
    counter-increment: listing;
}

That was a good start, as now the line numbers weren't incorrect, but there was still the issue of how to make the extra line number be invisible. Well, I found the answer. The CSS is:

.spr:before {
    content:none !important;
}

So, now my page displays the line correctly:

25 // some code;

Using this information, and the code that resulted from it, my above example can now be shown in a working manner. Note. .spr2 is for lines that are red but I still need a line number on them.

Edit: I also noticed that the list numbers are left-justified instead of right-justified. It took me some doing, but I found the answer. Look at the css code in code span::before for the details.

code {
    white-space: pre-wrap;
    background: lightseagreen;
    color:black;
    padding: 1em;
    margin: 1em;
    display: block;
}
code:before {
    counter-reset: listing;
}
code>span:not(.spr) {
    counter-increment: listing;
}
code span::before {
    content: counter(listing) " ";
    /* added these lines to right-justify the numbers
       and account for up to 4 digits wide */
    display:inline-flex;
    width: 2.75em;
    padding-right: .5em;
    justify-content: right;
    /* =================== */
    color: yellow;
    font-weight: bold;
}
.spb {
    color:blue;
}
.spr:before {
    content:none !important;
}
.spr {
    color:red;
}
.spr2 {
    color:red;
}

<CODE>
<SPAN class="spb">//</SPAN> <SPAN class="spr">some code;</SPAN>
<SPAN class="spr2">some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
<SPAN>some code;</SPAN>
</CODE>

Solution

The <code> and <pre> elements only permit phrasing content.

The <ul> and <ol> elements are flow content, and if their children include at least one <li> element, palpable content.

Consider escaping some of the html tag characters so that the browser treats each code snippet as plain text and not html.

<pre>
  <code>
      &lt;ol&gt;
        &lt;li&gt;&lt;/li&gt;
      &lt;/ol&gt;
  </code>
</pre>
<pre>
    &lt;ol&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ol&gt;
</pre>
<code>
    &lt;ol&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ol&gt;
</code>

Edit.

If all you need is line numbers, perhaps this approach without ordered lists would pass validation.

code {
  white-space: pre-wrap;
  background: lightseagreen;
  padding: 1em;
  margin: 1em;
  display: block;
}

code:before {
  counter-reset: listing;
}

code>.line {
  counter-increment: listing;
}

code .line::before {
  content: counter(listing) ". ";
  color: yellow;
  font-weight: bold;
}

.bold {
font-weight: bold;
}

<code>
<span class="line">// WL_MAIN.C</span>
<span class="line"></span>
<span class="line">#include <span class="bold">"WL_DEF.H"</span></span>
<span class="line">#pragma hdrstop</span>
</code>

Answered By - ksav

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Tuesday

What is the correct way to use PRE or CODE tags with a OL list inside

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels