
Markdown.css – make HTML look like plain-text - mrcoles
http://mrcoles.com/demo/markdown-css/
======
samwillis
Firstly this is awsome!

As much as I like kittens... This adds the markdown for images too:

    
    
        .markdown img {
          display: inline;
          content: "";
        }
        .markdown img:before {
          content: "![" attr(alt) "](" attr(src) ")";
          display: inline;
          color: #333333;
        }
    

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?

~~~
mrcoles
You're using opera, right?

This was already in my code, but I commented out, maybe I should just let it
be in there real quick before opera changes to webkit:
[https://github.com/mrcoles/markdown-
css/blob/016bf0863867aed...](https://github.com/mrcoles/markdown-
css/blob/016bf0863867aed0428bcfb8256d43863af0a09b/markdown.less#L191)

If not opera, lmk what browser you're using.

~~~
samwillis
This is working in Chrome 24.

Oh, yes it is. Its in the .less file, I had not spotted that.

EDIT:

You need `content: "";` in the less file and it should work.

~~~
mrcoles
Oh, interesting. Chrome does play nice with that.

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.

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

1: <http://almostobsolete.net>

------
kilovoltaire
very clever, particularly how the width of the equals signs below an h1 is
made to match the text width using hidden overflow:

[https://github.com/mrcoles/markdown-
css/blob/0d00981143172aa...](https://github.com/mrcoles/markdown-
css/blob/0d00981143172aad4f9939f6deed8106ca4000b5/markdown.css#L61)

~~~
mrcoles
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...](https://github.com/mrcoles/markdown-
css/blob/master/markdown.css#L185)

~~~
kilovoltaire
interesting!

in the same vein as the h1 equals, i like the blockquote brackets
implementation as well:

[https://github.com/mrcoles/markdown-
css/blob/0d00981143172aa...](https://github.com/mrcoles/markdown-
css/blob/0d00981143172aad4f9939f6deed8106ca4000b5/markdown.css#L122)

~~~
mrcoles
yeah, the \A makes a newline and the `white-space: pre` makes that work like a
<br>

------
TwistedWeasel
It's interesting and seems well implemented but I don't understand the use
case? Why would you need this?

If you want plain text inside HTML isn't what the <pre> tag is for?

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

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

~~~
shedside
Here's another way to convert HTML to Markdown:
[http://www.lowerelement.com/Geekery/XML/XHTML-to-
Markdown.ht...](http://www.lowerelement.com/Geekery/XML/XHTML-to-
Markdown.html)

~~~
indubitably
XHTML, your 90s are calling…

------
kmf
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...](http://www.codinghorror.com/blog/2009/12/responsible-open-source-code-
parenting.html)

------
leeoniya
shameless plug: client-side (or node) html > markdown, like _actual_
conversion

demo: <http://leeoniya.github.com/reMarked.js/>

repo: <https://github.com/leeoniya/reMarked.js>

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

~~~
leeoniya
it relies on the client's html > DOM conversion, so in a sense it does. but it
does not have a self-contained html parser.

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

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

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

------
kevinburke
Heh, I did something a year ago to do the opposite - take a plain markdown
file and give it some styles.

<http://kevinburke.bitbucket.org/markdowncss/>

HN discussion: <http://news.ycombinator.com/item?id=2827892>

------
Foomandoonian
Same as ReMarkdown? <http://fvsch.com/code/remarkdown/>

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

~~~
Foomandoonian
Kudos.

------
molf
Pretty cool. Would it also be possible to include the markdown markup when
copying the text?

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

~~~
goldfeld
Quite frankly that would be the most common useful use case for this, in my
opinion. In any case this is some great css hacking!

------
danso
Finally. A proper use-case for displaying content with the :before selector.

~~~
tantalor
Then it's only fitting that the use-case is completely useless.

------
sgt
I think could be interesting for Phrack as they are (or should be) modernizing
their e-zine format.

In that way, the old school boys can still keep their pure-ASCII, and others
may wish to apply some other CSS to make it more pleasant to read.

------
unfoldedorigami
Just submitted a pull request to auto-increment the ordered list numbering so
it doesn't repeat 1. over and over.

<https://github.com/mrcoles/markdown-css/pull/4>

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

------
dfc
This is nice. The one use case its missing for me is copy/paste with
formatting. Currently I use:

    
    
        $ pandoc -f html -t markdown http://example.org/page.htm > page.mdwn

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

For an example use, view the source of <http://dergachev.github.com/pin-
screenshot-bookmarklet>

------
lanna
I'm much better at HTML than Markdown. I totally could use this when I'm
forced to write Markdown.

~~~
mbetter
You can't, actually. Use Pandoc.

------
president
Awesome project. Is there anything that can actually convert HTML to Markdown
though?

~~~
janerik
I use pandoc[1] for this.

    
    
      curl -s example.com | pandoc -f html -t markdown -
    

[1]: <http://johnmacfarlane.net/pandoc/>

~~~
fiddlosopher
This works too:

    
    
        pandoc -t markdown http://example.com

~~~
janerik
Nice. Didn't know pandoc can directly read from an URL, even easier.

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

~~~
mrcoles
Works for me on opera 12.14 on Mac OS X. What version and OS are you using?

~~~
67726e
I'm also using 12.14 on OS X 10.7.5

Opera/9.80 (Macintosh; Intel Mac OS X 10.7.5) Presto/2.12.388 Version/12.14

~~~
mrcoles
What is it that you're not seeing working? screen shot of how it looks to me
in opera: <http://i.imgur.com/7te5TWW.png>

~~~
67726e
I meant regarding the image, but I looked at the code and realized you didn't
include it at all. Sorry about the confusion.

------
vysakh0
Pretty neat and cool! Seeing this i got reminded how awesome markdown is and i
just played around with my vim markdown plugin after long time.

------
mzs
Cool, but the numbered list has everything lablled as '1.' for me: ff esr
10.0.12

~~~
mrcoles
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>

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

------
drcoopster
I find this clever. Use cases aside, it's fun.

------
wyck
I don't understand this, Markdown is meant for writing.

Why don't you just output real markdown with something like Jekyll, Markdown
Server (node) or Showdown?

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

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

Markdown is portable, fake markdown isn't.

------
asimjalis
This is hilarious. Thank you :)

------
huhsamovar
Does anybody else think we've come full circle now?

I don't see how this is at all useful. Just upload a .md file.

