It’s the browser’s panic response coming into play. It sees the <figure> as something that cannot go inside a <pre> tag, so it shatters the tag; meaning you’ve now got an orphaned <pre> at the top, and an orphaned </pre> at the bottom, so it fills in the missing bits as best it can to form a complete HTML; <pre></pre> and <pre> </pre> (why it injects a NBSP when inserting a open tag… shrug)
I try to show that particular piece of code on the website. So far I didn’t have a problem with showing other pieces of code, multilined or singlelined.
Because that particular code is multilined and because I also want it to have a frame with a unique background color, it’s very important for me to use a pre tag.
I’d be surprised if W3C never created a tag which is 100% plain text with no exceptions, like <plaintext></plaintext> maybe.
There may be some confusion on the output expected. If what’s needed is a section of html to be displayed on the page *** without actually rendering the html ***, then the <code> tag will not do the trick. It will output the html, and the browser will render it, leaving just the paragraphs and what-not that the html has. If the OP actually wants to see html *** tags *** showing up on his browser, then I don’t know of an html element that supports this. If it were me I’d push the contents of that element through php’s htmlspecialchars() function before sticking it in the code or pre tag, and then knowing the next question will be about the newlines, it probably also needs to be passed through nl2br() to put a <br> at the end of each line.
If we could invent tags on the fly as possible with XML if I recall correctly (the sister language of HTML) this might have been a solution to my problem, was it not?
In general yes, it looks like <code> is a bit like a <span> element that way, whereas <pre> really does mean pre-formatted in that it’s not going to do any formatting on top of whatever you give it (aside from the fact that it still parses it as html).
I don’t see how xml would help anything here by the way. If you have access to php I’d recommend the solution I just gave above.
Inventing a tag only works if something is there to interpret it on the other end. In this case, a browser, that is listening for HTML, and not ready to guess at what your tag is supposed to mean.
Javascript can handle it, PHP can handle it… you should be able to just ctrl-H and replace in selection in most text editors…
Well, I just tried, primarily for the sake of learning and experience, if not adventure, to invent a new tag there: <newpre></newpre>
and I gave it the exact same CSS directives that I gave for <pre></pre> tags.
Alas, it also, didn’t give me the expected result, but at least this time, after saving the webpage, the processed code didn’t break, it stayed the same in the source code of the webpage:
<newpre>
<figure>
<img src="img.jpg" alt="Some alternative text">
<figcaption>
Some text under the image
</figcaption>
</figure>
</newpre>
But, however nice is the fact that the HTML wasn’t postprocessed into being broken this time – the problem of not getting plain text persists so it’s not really a solution and I have to step back from it.
So,
What should I do in the end?
How could I finally show <figure></figure> data as plain text, but also in a multilined fashion?
That’s what I thought in my sub consciousness – it acts like a <span> tag.
I didn’t manage to figure out what that solution is.
If you can still try to edit the above reply, adding some line breaks, markdown, etc, please do, but if you can’t please consider to publish a new general reply below with more line breaks, markdown, etc, explaining in a more stepped way what are you suggesting that me, or anyone else in a similar situation, would do.
A stepped approach like: Step A, step B, step C … Would help a lot.
It’s unclear to me what your goal is. You can have multiple lines in a <code> element just fine. What it doesn’t accept is block-level elements, which is what <figure> is.
Do you want the HTML in your pre tags to be rendered (show the image with a caption) or displayed as-is (so the browser displays the actual code, like the code blocks here)?
That’s both happying and saddening on the same time
I’ts happying because the folllowing code was rendered good enough.
<pre dir="ltr">
<figure>
<img src="img.jpg" alt="Some alternative text">
<figcaption>
Some text under the image
</figcaption>
</figure>
</pre>
I say “good enough” because Drupal re-sorted it like this:
<pre dir="ltr"><figure>
<img src="img.jpg" alt="Some alternative text">
<figcaption>
Some text under the image
</figcaption>
</figure>
</pre>
For me, these sourcecodes are frustrating, but it still appears nice in page output.
Now then, it’s saddening because the original, much clearer code, does not require vast search and replace operations such as:
FROM < TO <
and
FROM > TO >
<pre>
<figure>
<img src="img.jpg" alt="Some alternative text"></img>
<figcaption>Some text under the image</figcaption>
</figure>
</pre>
It saddens me even more to know that this code won’t be usable until W3C updates <pre> tags to show <figure> tags as plain text as well, and one can only “go figure” if and when it will ever happen.
To just show a frame of plain text in the middle of an HTML document, and when I say “plain text” that should indeed include block-level elements" which is what <figure> is, but just as plain text as well, like any other plain text.
So, yeah, that’s my goal here, to have just a multilined frame/block/chunk/piece/segment of plain text, in between all the regular HTML.
And yes, I want the HTML in my pre tags to be rendered as-is (so the browser displays the actual code, like the code blocks here).
It’ll very likely never happen. That is not the point of <pre>, the point of <pre> is to mark text as having significant whitespace so the browser should not perform the normal white-space collapse function.
There used to be a tag that does what you want, <xmp>. It probably still works, but has been deprecated and should not be used. The proper way to display HTML code is to escape the tags. Usually whatever software you are using would do this automatically for you (like for the code blocks here) but if you’re assembling things yourself then it’s up to you to perform that escaping.
from what was done to the poor