Also, it looks like maybe you have to make the img content "", in order for the :before to work—otherwise it doesn't show up, at least in chrome, and with that demo it appears as nothing at all in firefox. It's a cruel world…
In the bookmarklet (included at top of demo) I do an extra step to make images inside links smaller and appear inside the link markdown—not what you were getting at, but it is a little something something.
This is cool :) I do a similar thing on my site[1]to make it look like Org-mode files (which is what I use to write it). I enjoy the fact that so much processing goes into making it look just like it did to begin with :p
The magic is the quirks in how `display: table-cell` makes it like a block, but only as wide as the text, then the pseudo element with equals signs is positioned absolutely inside. Fortunately, most browsers allow this, but firefox doesn't let things be positioned absolute inside a `table-cell`, so I make FF just fall back to `display: block` https://github.com/mrcoles/markdown-css/blob/master/markdown...
That was definitely the most impressive bit for me too. I thought, how on earth was that done? Very clever.
It's a shame it doesn't work for copy-paste, but honestly, it's probably even easier to write a reverse-markdown script than to figure out how to do it with CSS!
Also, there's a bookmarklet at the top of the markdown-css demo that let's you apply the markdown styles to any page, which is like a harder-to-read version of readability or a quick way to see how well layed out the markup is on any page.
As a developer you may not want it - but my friends who are copywriters, editors and content strategists will LOVE this. A simple way to grab existing web content as markdown, which many are already using to write and edit their content.
The problem (at least for me on FF18/Win7) is that you can't just copy/paste the converted markdown, since it is just a display trick, not actual parsed and generated raw text.
I had made a converter that used XSLT and produced actual selectable and copy-able (?) markdown text; didn't gain much traction; I'll post it again to see if anyone's interested.
But this doesn't convert HTML to Markdown (there's already pandoc for that), it displays it as if it were Markdown. It's a clever example of what you can do with CSS, as well as perhaps poking fun at the current popularity of systems like Markdown which artificially restrict us to the IO capabilities of 70s VTs.
That makes more sense to me now. Thinking about it I see it being useful to help with some currently painful tasks like converting old wiki content that has a non-standard wiki markup syntax (or no markup at all) into markdown.
Well, maybe you want the HTML formatting without the styles or all the CSS classes. Say you wanted to do something like grab all the docs off a website and then apply your own styling or put them on an internal reference. I can see that being a good use case to allow that for open documentation.
Maybe it's like "Readbility" and those other ways of de-cluttering a web page or standardizing your style as a reader? If you have a browser that is set up to let you choose a style sheet for display, you now have a "distraction-free reading environment."
This is awesome. Projects like this make me appreciate the fortitude of Markdown. John has made a project that essentially got it right on the first try[1], with very few patches or additions. In a world of software development where I'm running `gem update` all the time, it's nice to have something like Markdown which really knocked it out of the park in one try. I don't have to check the docs to know if the syntax for URL linking changed, and your implementation isn't going to be any different from mine. It's nice to have a standard like that everyone can rally behind.
[1]: I'm aware of projects like MMD, which AFAIK are primarily add-ons to the original Markdown syntax. I also realize that Markdown isn't perfect: Jeff Atwood has a good write-up on this from late 2009 -- http://www.codinghorror.com/blog/2009/12/responsible-open-so...
Nice! I am working on an editor (based on content-editable) which translates to markdown. If your script handles invalid html I might as well use yours.
it'd be fairly easy to make one, but i imagine it would have limited utility since the entire content of the page is rarely what you want. how would you go about selecting which portion you're interested in? also, i'm not certain a bookmarklet would have direct clipboard access due to security, i could be wrong tho.
feel free to open up an issue on github to discuss the idea and implementation details further.
This may have changed in the last few years, but I believe you can simply do "window.getSelection()" in your bookmarklet to access the currently selection for Firefox/WebKit browsers.
Sadly you're almost certainly right. Most of the places I could see wanting to reverse-engineer the displayed HTML into Markdown are actually sites using their own hackish, inconsistently rendered output. You'd end up needing per-site tweaks and that'd kind of render the whole thing unworkable and pointless.
I still wonder why Markdown is so popular while reStructuredText is not. I find the latter much easier to read, it looks better in both plain and rendered format (and rst2pdf makes nice docs).
Well, one thing that definitely isn't helping is its horrible name. And as evidence, the very first thing on their site:
"'reStructuredText' is ONE word, not two!"
I'm definitely never going to type out that entire word, so now do I abbreviate it to reST? or ReST like some people on the site seem to be doing? It'll just get confused with REST in Google searches...
Markdown is 'lighter' and aimed at the more general case: churning out lightly-formatted text quickly, with as few 'rules' as possible, with page layout concerns addressed by templates defined elsewhere.
reStructuredText is 'heavier' and only really an improvement over Markdown if you're trying to embed page layout into the text. Which fewer people are.
You are right. I think I prefer reST because it produces documents. It's not a quick way to add markup, it's a quick way to structure a document (and provide links, sections, inline code etc).
Wow, that's really similar with very similar approaches. The internet is a great way to find out you're not very original. I'll add a link to that project from mine.
the after and before pseudo elements are kind of weird. I think for it to work with copy-paste I'd have to include some JS to look at the selection, reverse markdown it, and then get it into your clipboard.
Personally I think to add an icon (using an icon font or possibly a data uri) is a great (and proper) use-case for displaying content with either the :before or :after selector.
I'm pretty sure that was an intentional design choice to make the text look more like Markdown. Ordered lists increment by default — they went out of their way to disable that.
If you're interested in this, you should also know about Showdown.js, a library that converts markdown into HTML client-side: https://github.com/coreyti/showdown
Yeah, technically markdown doesn't need the numbers to be incremented, so I thought it'd be more fun to explicitly not use counters. Maybe it's too confusing though. There's a discussion about it here:
https://github.com/mrcoles/markdown-css/issues/1
UPDATE: I ended up merging that in and making the ones toggle-able, and then added a toggle link into the demo so you can see both http://mrcoles.com/demo/markdown-css/
yea, its a good case using just
30. item1
999. item2
2. item3
for numbered lists
but it can possibly "break" in some later versions of markdown, as said by the man himself:
"If you do use lazy list numbering, however, you should still start the list with the number 1. At some point in the future, Markdown may support starting ordered lists at an arbitrary number."
-- John Gruber / Daring Fireball
(http://daringfireball.net/projects/markdown/syntax#list)
It’s meant as an interesting CSS hack to make markup look like markdown, but still function as regular HTML (including having things like links still work). There are thousands of things that compile markdown to HTML, that's not at all what this does. Try clicking on the different tabs to show the different states or the demo link to the left of them—maybe that'll make more sense?
I still don't get it, why should I make something look like markdown when it can be actual markdown. Links work in markdown, you can eve use something like maruku to have html elements (divs, id's etc) in actual markdown.
Just curious, but what version of Opera did you get `:before` & `:after` working on? I was just trying this out on the latest Opera and couldn't get it to work.
As much as I like kittens... This adds the markdown for images too:
The trick to make it work with images is the `content: "";` on the img element to stop the browser from treating it as an image.EDIT:
See it here: http://jsfiddle.net/F2mjs/
Anyone know how to make the link clickable?