

Markdown.css: let's make the Web prettier - kevinburke
http://kevinburke.bitbucket.org/markdowncss?

======
saibotd
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.

~~~
Rauchg
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).

------
jrnkntl

       "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?

~~~
kevinburke
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.

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

~~~
jacobolus
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/>

~~~
cabalamat
> 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.

~~~
jacobolus
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.

~~~
moe
_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.

------
telemachos
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.)

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

~~~
telemachos
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.

~~~
theb83
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?

~~~
kevinburke

       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.

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

~~~
fredoliveira
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.

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

