Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I have a <pre> Tag inside a <p> tag in Tumblr?

today I played around a little bit with Tumblr. I tried to add a preformatted text into a description paragraph block like so:

{block:Description}
    <p id="description">{Description}</p>
{/block:Description}

However, the <pre> element gets rendered just after the <p> element and not within it which was my intention.

Am I doing something wrong here or is it a bug?

like image 824
digitalfleisch Avatar asked Mar 20 '11 21:03

digitalfleisch


People also ask

Can I put a tag inside P?

<p> inside <p>You cannot nest P elements it is illegal. The P element represents a paragraph. It cannot contain block-level elements (including P itself). DIV however is a generic container where content can be inline e.g SPAN or block-level.

What tags can be used inside p tag?

The p tag. This tag defines a paragraph of text. It's a block element. Inside it, we can add any inline element we like, like span or a .

What is the difference between P tag and pre tag?

The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element while, the <pre> tag defines pre-formatted text. Text in a <pre> element is displayed in a font (usually Courier), and it preserves both spaces and line breaks.

How do you add a pre tag?

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.


2 Answers

You cannot nest block-level elements, such as <pre>, inside <p> in HTML, so Tumblr is behaving correctly. You should close your paragraph before inserting the pre-formatted text.

If you want inline code-style text, try the <code> tag. You can then supplement it with CSS if needed.

<p>I like to use the <code>code</code> tag in my HTML files.</p>
code
{
    padding: 2px 4px;
    color: #000000;
    background-color: #eeeeee;
    border-radius: 3px;
}
like image 189
Johnsyweb Avatar answered Oct 17 '22 22:10

Johnsyweb


Also, I just realized where I was having a similar issue pasting code into tumblr inside <pre> and <code> tags is that just because you wrap your code in those tags doesn't prevent you from having to escape the carets with &lt; and &gt; instead of the carets.

like image 31
Joel Glovier Avatar answered Oct 17 '22 22:10

Joel Glovier