11

Markdown creates output like this:

<p>see this example:</p>
<pre><code>code</code></pre>

Is this correct or should it be:

<p>see this example
<pre><code>code</code></pre>
</p>

To me the second one seems correct, since the paragraph and the code example are one unit. What are your thoughts about this?

edit: actually I could argue the same about a list (eg "order any of the following:") but a list can't be placed withing a paragraph.

edit2: to clarify, technically both are correct, as a table based layout is technically possible. But what would you argue is the way that best expresses the intention of the tags given a paragraph like this? Or maybe it doesn't matter? Note that the pre element isn't very relevant here (but included because markdown outputs it too).

4
  • Please clarify your question. You say you're asking about the code element, but then your examples are actually about code inside pre blocks. There are two completely independent ways to produce those things, and by not showing us the original Markdown you're using or telling us your expectations, it's hard to see what the actual problem is(if there is one). Is it that you just don't know the Markdown for creating an in-line code snippet?
    – Su'
    Aug 13, 2011 at 4:40
  • @Su' thank for pointing out the confusion. U've updated it and hopefully it is more clear now.
    – koen
    Aug 13, 2011 at 16:31
  • I'm curious why you accept that a list can't be placed within a paragraph. That's the exact same restriction as with the pre tag. Why are you questioning one and not the other? (The pre tag is relevant, by the way, which is part of the confusion. It's inherently a different thing. Inverse to how you can't put the pre inside p, you can't put code outside some block element.)
    – Su'
    Aug 13, 2011 at 17:14
  • @su' A paragraph accepts only inline elements. A list is block level. Hence a list within a block is technically incorrect.
    – koen
    Aug 13, 2011 at 23:32

3 Answers 3

10

According to the w3c <code> is an inline element so it can be placed inside a <p> element.

FYI, your <pre> tag is redundant. Not only do most user-agents display content as if it was wrapped in a <pre> (e.g. no word wrap and monospace type) but you should be using CSS to control the presentation of <code> elements anyway.

8

As John said, code is an in-line element, and can be placed in paragraphs. (Not necessarily should; there are plenty of other places it's also allowed.) Either your title or examples above are wrong, so I'll cover both possible cases, stealing from Gruber's docs.

To produce a code block requires pre, which is a block element and isn't allowed inside a p tag.
Use the following Markdown:

This is a normal paragraph:

    This is a code block.

...which will output:

<p>This is a normal paragraph:</p>
<pre><code>This is a code block.</code></pre>

as you showed above.
Markdown is correct in doing this; the paragraph and code are related, but they're not a unit. (But as I said in my comment above, I'm unclear whether this is what you're actually trying to do.)

 

To produce an in-line code element, you should be using the following Markdown:

Use the `printf()` function.

...which will output:

<p>Use the <code>printf()</code> function.</p>
2
  • "the paragraph and code are related, but they're not a unit". Although they may not be a unit, aren't they related enough to have their expression in the same paragraph? In a printed book, wouldn't you understand them as one paragraph? Or if you were asked to quote the whole paragraph starting with "This is a normal", would you include the code?
    – koen
    Aug 13, 2011 at 16:37
  • @koen No, I wouldn't see them as a single paragraph; it'd be a paragraph followed by a code block; code isn't "text." If I were asked to quote the entire chunk above, I would stick them inside a blockquote, still separately. Unless this is a purely theoretical discussion, though, none of this matters. The spec says the pre can't be nested inside p and that's your answer, unless you want to link your documents to a custom DTD, which is generally discouraged.
    – Su'
    Aug 13, 2011 at 17:15
4

And the HTML5 terminology is:

Since code's categories include "Phrasing content", code can be put inside p.

See also: https://stackoverflow.com/questions/9852312/list-of-html5-elements-that-can-be-nested-inside-p-element

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.