Markdown.css: let's make the Web prettier

http://kevinburke.bitbucket.org/markdowncss?

by kevinburke • 15 years ago

88 23 15 years ago

kevinburke.bitbucket.org

jrnkntl• 15 years ago

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

kevinburke2• 15 years ago

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• 15 years ago

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

jacobolus2• 15 years ago

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• 15 years ago

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

peng• 15 years ago

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

russross• 15 years ago

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

saibotd• 15 years ago

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• 15 years ago

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

telemachos3• 15 years ago

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

StavrosK2• 15 years ago

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

telemachos3• 15 years ago

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.

podperson• 15 years ago

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

scrrr• 15 years ago

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

fredoliveira• 15 years ago

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.

Markdown.css: let's make the Web prettier

Related Stories