5

I decided to rewrite the whole question in order to address some points made by James and HackerKarma in the comments. Sometimes I forget the way this site works. :)

I decided to come here and ask for guidance about the Markdown support in the StackExchange framework. There is this thread in TeX.sx in which I'd like to include an image reference near each header (in order to provide more info on each journal's location). The following Markdown code shows my humble MWE:

# Title

Hello, I am a title.

# ![][1] American title.

Hello, I am an American title.

[1]: http://i.stack.imgur.com/7f1Lm.png

I tried it in SE's own editor, but both preview and final result lead to the following ouput (note that the American flag was not aligned to the header text):

Image

Then I decided to take a look in another Markdown editor to see if the result was similar to the one I got before. I tried StackEditor (which is not in any way affiliated with StackExchange) and got something along the lines of my original expectations:

Image

Then I decided to ask you people if this behavour is actually intentional (by design) or perhaps an issue in the Markdown parser?

In the comments, James raised a valid point asking if the output should really work like that. Markdown seemed to be a loose format in its beginnings, so each implementation would handle things differently. Even extensions were available, in which, to a certain extent, deviates from the original intention, but that is beyond the point. :)

I found a Markdown spec attempt in CommonMark which aims at shedding some light on the ambiguity of the original proposal. I found the following paragraph which covers my doubt:

Parsing has two phases:

  1. In the first phase, lines of input are consumed and the block structure of the document—its division into paragraphs, block quotes, list items, and so on—is constructed. Text is assigned to these blocks but not parsed. Link reference definitions are parsed and a map of links is constructed.

  2. In the second phase, the raw text contents of paragraphs and headers are parsed into sequences of Markdown inline elements (strings, code spans, links, emphasis, and so on), using the map of link references constructed in phase 1.

But as I mentioned, I don't know if the original SE implementation covers this very specific case. So I'd like to know if the behaviour is intentional or not. :)

  • 2
    Are they supposed to work like that? – James Aug 25 '15 at 20:15
  • @James: No idea, actually. But since I got two different outcomes for the same code (and I suppose StackEdit is a byproduct of SE), something looks inconsistent. :) – Paulo Cereda Aug 25 '15 at 20:18
  • 1
    StackEdit is a byproduct of SE? As per WHOIS and footer it says "Benoit Schweblin" – HackerKarma Aug 25 '15 at 20:30
  • @James: According to this Markdown spec I found: [...] the raw text contents of paragraphs and headers are parsed into sequences of Markdown inline elements (strings, code spans, links, emphasis, and so on), using the map of link references constructed in phase 1. I am not questioning if it's right or wrong to support this feature, I'm reporting what I've tried and asking if this is by design. – Paulo Cereda Aug 25 '15 at 20:31
  • 1
    @HackerKarma: Ouch, I take it back. I haven't done my homework. You are right. :) – Paulo Cereda Aug 25 '15 at 20:31
  • @PauloCereda No problem. Also, as for the font size goes, I prefer the SE output. But, the flag should align to 'American Title'. You get +1 for that. – HackerKarma Aug 25 '15 at 20:47
  • 2
    I'm still not entirely sure <h1><img src="url">Title</h1> is not the way you do it with pure plain HTML. – Braiam Aug 25 '15 at 21:05
  • @Braiam I'm not sure I'm not misunderstanding your double negative, but plain HTML would behave the same way. – user259867 Aug 25 '15 at 21:17
  • @James: I decided to rewrite the whole question, maybe now my intentions are clearer. :) Sorry for the possible confusion. – Paulo Cereda Aug 25 '15 at 21:24
  • @NormalHuman put ellipsis after "sure" – Braiam Aug 25 '15 at 21:32
8

This has nothing to do with Markdown processing. Comparison of StackEdit HTML output and SE HTML output shows them to be essentially identical. And you can reproduce the layout issue directly in HTML:

<h1><img src="http://i.stack.imgur.com/7f1Lm.png">American Title</h1>

renders as

American Title

Why? Because SE style is to have 1em bottom margin for images, unless they appear within a paragraph:

.post-text img {max-width:630px;margin-bottom:1em}
.post-text p img {margin-bottom:0}

The margin isn't there for inline images like this one.

The margin could be removed with additional style rules for images in a header:

.post-text h1 img {margin-bottom:0}
.post-text h2 img {margin-bottom:0}
.post-text h3 img {margin-bottom:0}

although the benefit/cost ratio is questionable.

  • 1
    Silly me, silly me! I haven't tried to look at the generated HTML (Use the source, Luke!). Thanks for the discovery, it was eye-opening. I think the case is now closed. :) – Paulo Cereda Aug 25 '15 at 21:25
  • 1
    Yes, especially because after switching to mobile, I see all images centered horizontally on their own line. SE isn't fond of inline images. – user259867 Aug 25 '15 at 22:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .