How to present plain text in a HTML document when pre tag isn't enough?

HTML & CSS
22

Interesting. Thanks. First time I learn about <xmp>.

I think I’ll send an email to W3C, suggesting them to reconsider to rejuvenate <xmp> and will refer them to this thread.

23

Here’s some php code that should get you started:

$source = '<figure>
        <img src="img.jpg" alt="Some alternative text"></img>
        <figcaption>Some text under the image</figcaption>
</figure>';
$str = htmlspecialchars ($source);	// convert all special HTML characters to printable versions
$str = nl2br ($str,false);				// convert newlines to <br> 
$str = str_replace (' ','&nbsp;',$str);	// replace spaces with nbsp fixed width spacing for indentation
echo "<pre>$str</pre>";
1 Like
24

Technically you would only need to smash the <'s (and any ampersands). Without a matching <, the > doesnt do anything.

25

Hopefully, what was done to the poor <pre> tag will not happen if you put it within the <figure> element.

26

I thank you for sharing this with us but about me, starting with what?
I seek an HTML solution to an HTML problem; I don’t do anything in PHP in this case.
I just want to format code correctly in the text editor (WYSIWYG CKEditor 5.0).

27

That’s why I said my solution would work if you had php. You could have saved me some time if you’d told me you wanted something that was just html and an editor. You’ve been given ways to do that manually, replacing <, >, & and spaces with html character entities. I don’t know another way.

28

Well, I thought that it was evident from my question that my problem is in the scope of HTML alone, that no JavaScript, CSS or PHP would help, only better HTML tags or some HTML escaping in the text editor source code edit mode.
Perhaps I should have bolded the text about the text editor WYSIWYG CKEditor 5.0 like this. Now I can’t edit the question anymore but you are welcome to flag it and suggest an edit if you will.
Thanks.

29

I agree that currently the only way to solve the problem in my original post is to escape all relevant tag characters which in this case are all the < and > characters inside the <pre></pre> tags.

I have tried to put the original code inside <xmp></xmp> tags but currrently these are totally deprecated so it didn’t work.

I have detailed in post #16 what I did excatly.

30

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.