Markdown.css: let's make the Web prettier | Hacker News Reader

Markdown.css: let's make the Web prettier

kevinburke.bitbucket.org

88 pointskevinburke23 comments

Am I missing something, or is this really just a simple css file that's not really got anything to do with markdown itself?

Because the title makes it sound like it is a CSS file that is somehow able to render markdown directly.

This is meant to make the output of the Markdown > HTML conversion look good. Even though there are other CSS projects that try to make default browser stylesheets look nice (many of which have been featured on HN), I particularly like this one since there are certain Markdown elements that the aforementeioned projects might not tackle (for example, indented code, `inline code`, etc).

   "For the markdown to parse correctly, you need to add the closing <link> tag.
   This is not technically correct HTML, but it will parse in any browser."

Why would that be?

From the W3Schools reference (http://www.w3schools.com/tags/tag_link.asp):

    In HTML the <link> tag has no end tag.

However, if you try to add just

    <link href="#" rel="stylesheet" />

to the .markdown file, the Markdown preprocessor (at least the one I am using) would not process the rest of the file. I think it only recognizes a subset of HTML tags. You can try it for yourself.

Is it just me or should the bullets and numbers of the lists be indented?

Many typographers prefer to set lists with the text aligned on the left, and the bullets and numerals pushing into the margin, because it integrates the list better with the text and is less visually distracting. See e.g. http://www.iamdavedawson.com/articles/hanging-discussing/

> Many typographers prefer to set lists with the text aligned on the left, and the bullets and numerals pushing into the margin.

I don't think this would work very well if you have multiple levels of bullets.

If you have multiple levels of bullets, there’s usually something going wrong. Hierarchical bullet lists which use nested indents are in my experience an absolutely terrible device for conveying complicated ideas.

To each his own opinion. For me mutliple levels of bullets approach a mind map [1], rather than a list of things. And those can be really handy.

[1] http://en.wikipedia.org/wiki/Mind_map

If you have multiple levels of bullets, there’s usually something going wrong.

Nonsense. There are many situations where 2 or even more levels of hierarchy are exactly what you want. Screwing up such a common need in favor to a questionable typographic preference is not a good idea.

And yes, in theory you can "fake" the hierarchy with headlines. In practice that tends to look rather odd and make it hard to actually recognize the hierarchy. Especially in a whitespace-heavy stylesheet like this one.

You're often right, however, the markdown spec supports nested lists, so just throwing them out (or making them far, far more difficult to understand) under the pretense that you're organizing your data poorly and should do it differently is somewhat unreasonable in this case.

It just looks messy here, since there's not enough padding on the left side of the page to account for the hanging bullets.

I agree. Nested lists seem to be completely flattened, making them almost unusable.

The look is clean and very readable, but I'm trying to figure out the use-cases. Why use Markdown + this idiosyncratic CSS link to produce a partial page, rather than render the Markdown into a full (valid) HTML page and then style it normally with CSS (this or some other CSS)?

As far as I can tell, that page (1) doesn't validate at all and (2) throws your browser into quirks mode. Why is that a good outcome?

(Edited for clarity after StavrosK's question.)

Check the actual source of the page you're viewing. It's HTML, generated from the markdown file.

I did look at the source, and I see that's it's HTML. (I hate trying to enter code on HN, so here's a gist with the full source of that page: https://gist.github.com/1116746)

But it's only a partial page. There's no doctype, no head, no formal declaration of body. There's HTML and CSS for the browser to render, but it's guaranteed to be in quirks mode (unless I'm confused). That's why I said "full HTML page" above. (Edit: I see now where my first post was unclear. I edited it to make my complaint clearer. Thanks.)

I'm not quite sure where this is useful - I may not be understanding what it's for. I would hate the idea of lots and lots of sites serving this kind of partial page.

It looks to be just a css file to make Markdown files pretty when straight-compiling to HTML. It's better than keeping them with the browser's default stylesheet, but I don't know anyone who serves Markdown files straight up after a conversion...

> but I don't know anyone who serves Markdown files straight up after a conversion...

Exactly. This is why I don't see the use-case for this.

Only the doctype, title, and the loss of </link>, are required for it to validate as HTML5; <head> and <body> are implied.

I think the original `markdown` utility generated a HTML fragment rather than a standalone page. If so, perhaps the point of this is that adding the CSS link is the Simplest Thing That Can Possibly Work in order to improve the page appearance?

   adding the CSS link is the Simplest Thing That Can Possibly Work in order to improve the page appearance?

That's correct. It was useful for me, and I figured it might be useful for others as well. The initial use case was for a README for a repo.

I like that layout, its readable. But why not make the default text-color #000 instead of #444 for maximum contrast and readability?

You're actually right about maximum contrast, but wrong about that meaning maximum readability (the two things don't go hand in hand even though one might think they do). Solid black versus solid white reads well, but is more tiring on the eyes than something lighter on solid white (which is what the author is doing by using dark grey), particularly for long passages of text.

Let’s stop using “'” when we mean “’” and we're trying to pose as designers.

Reply on news.ycombinator.com