
Markdown.css – Make HTML look like plain-text markdown - JBiserkov
http://mrcoles.com/demo/markdown-css/
======
kiwidrew
While I can't imagine _why_ anyone would want/need to do this... it does do a
great job at demonstrating the flexibility of modern CSS! The most clever bit
(to me) is the underline characters on the <h1> element.

~~~
throwaway2016a
The underline on the <h1> just uses the :after psuedo class with some absolute
positioning and some padding. Just like almost every other class here. I'm
curious what sticks out to you as extra clever with the <h1> vs the other
elements that also use :before / :after

~~~
matchu
The tricky part is rendering the correct _number_ of equals signs.
Markdown.css fakes it by rendering a constant large number of equals signs,
then setting the width so that only some are visible.

~~~
timlyo
It seems to work by printing lots of `=` beneath, and then hiding the
overflow. Inspecting and changing the title's width reveals more `=` and makes
it possible to display half of one.

------
ComputerGuru
I don't get all the hate for this. I think it's very nifty and actually has a
number of easy applications right off the top of my head. You've basically
just built an html-to-plaintext conversion utility, using your browser's HTML
parser/render instead of writing your own. You've taken a difficult-to-parse
syntax and changed it to plaintext, after which it can be marked up (or down)
as needed for whatever application you have in mind.

Cool.

(immediate "tags" that my brain went to upon seeing this: printer mode,
accessibility modes for visually impaired, text-to-kindle, text-to-audio)

~~~
lisper
> You've basically just built an html-to-plaintext conversion utility

That's not what this is. Try copying the markdown so you can edit it as you
suggest and you will find it doesn't work. The output _looks_ like markdown,
but it isn't markdown, and that's the source of the negative reactions. Having
a one-to-one correspondence between representation and rendering is the main
thing that makes markdown useful. Making something look like markdown but not
actually be markdown strips it of nearly all of its utility.

~~~
coldtea
> _Having a one-to-one correspondence between representation and rendering is
> the main thing that makes markdown useful._

And looking simple with minimal formatting is the second thing. This idea taps
on that second thing.

~~~
lisper
If that's your goal, and your source is already in HTML, then the best
solution is no CSS at all.

~~~
dannypgh
Isn't the default styling of HTML in browsers mostly just due to historical
accidents?

~~~
lisper
Probably. So?

------
eridius
Cute. But is there any way to make the markdown formatting text actually
selectable/copyable? Right now I can't select it, and if I copy the text
surrounding it, the markdown formatting simply vanishes.

~~~
chx
There is. You just need to manipulate the selected text as described here
[http://stackoverflow.com/a/36582615/308851](http://stackoverflow.com/a/36582615/308851)
and
[https://github.com/niklasvh/jquery.plugin.clipboard](https://github.com/niklasvh/jquery.plugin.clipboard)
here.

------
eatonphil
I was quite surprised to learn about the attr function [0] that allows you to
query the selected element's attributes, but it's actually been around for a
while now and is supported by most (/ all?) browsers. Pretty nifty.

[0] [https://developer.mozilla.org/en-
US/docs/Web/CSS/attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)

------
Retr0spectrum
As the author notes, there's a similar project here:
[https://fvsch.github.io/remarkdown/](https://fvsch.github.io/remarkdown/)

Personally, I'd consider using this for projects where I want the plaintext
aesthetic, but also with the semantic elements that HTML provides for
accessibility/interactivity purposes.

------
mrcoles
Lol, loving all the comments asking what the usecase is or pointing out how
it’s not functional.

Here are some other things I’ve built in the past because the code and/or the
idea was interesting to me: [http://mrcoles.com/failed-
projects/](http://mrcoles.com/failed-projects/) |
[http://mrcoles.com/dragondrop/](http://mrcoles.com/dragondrop/) |
[http://mrcoles.com/tetris/](http://mrcoles.com/tetris/) |
[http://mrcoles.com/low-res-paint/](http://mrcoles.com/low-res-paint/) |
[http://mrcoles.com/piano/](http://mrcoles.com/piano/) — don’t bother asking
for a usecase ;)

------
TuringTest
What I don't get is why Markdown is always displayed as _plain text_ , when
it's supposedly a format to represent styling. Why can't we have a version of
Markdown that gets syntax highlighting according to the actual written markup,
without hiding the markup code? I.e. making identical the "code" form and the
final "rendered" form.

For example, writing " * this is highlighted * " would be shown as " * _this
is highlighted_ * ".

 _Edit_ : I've just found [http://hackcss.com/](http://hackcss.com/) in the
comments below, which seems to _get it_ and does what I've explained above,
highlighting headers and code with a bold, darker font.

~~~
dejawu
Some newer Markdown editors will style the raw Markdown in addition to
providing the rendered form, such as StackEdit[1] or Nanote[2] (my own work).

[1] [https://stackedit.io/editor](https://stackedit.io/editor)

[2] [https://nanote.co](https://nanote.co)

~~~
akavel
For a desktop editor, see: [http://www.typora.io/](http://www.typora.io/) (non
affiliated, I just like it, wanted to write something similar)

~~~
TuringTest
Yes, Typora's _live preview_ is more or less what I was thinking, showing the
markup just for the item rigth below the cursor.

I'd still add a mode like Microsoft Word's "show formatting marks", so that
the user can decide whether to see the full markdown text or only the word or
line being edited.

------
cocktailpeanuts
I for one, applaud this type of experiment over the next new CSS grid
framework that does the same thing as thousand others that came before.

------
nkjoep
Yes! and just for the record I wrote a similar thing 3 years ago
[https://github.com/NKjoep/i-love-
markdown.css](https://github.com/NKjoep/i-love-markdown.css)

------
notgood
It would be way more useful if you could copy the "markdown version" (as a
quick way to create Markdown files), but a lot of characters such as "##"
can't be selected/copied because its using the css rule "content" to create
them[0].

Unfortunately a proper solution for this would need to modify the HTML
(JavaScript) to add such characters.

[0] [http://stackoverflow.com/questions/19914349/how-can-i-
make-g...](http://stackoverflow.com/questions/19914349/how-can-i-make-
generated-content-selectable)

~~~
rat87
Why are css content characters not copy/pasteable?

That seems broken.

~~~
oneeyedpigeon
Probably because they _should_ only be used for 'decoration' rather than
actual content - this is css, after all.

------
leeoniya
or to actually convert HTML to markdown:
[https://github.com/leeoniya/reMarked.js](https://github.com/leeoniya/reMarked.js)

disclaimer: mine

~~~
bambax
or to convert rich text to markdown:
[http://markitdown.medusis.com](http://markitdown.medusis.com)

(same disclaimer!)

------
duck
Another similar project is [http://hackcss.com/](http://hackcss.com/) (which
was inspired by this one).

------
sergiotapia
Shame you can't select all the selectors for markdown.

~~~
alanh
IIRC, Firefox used to have this behavior. It no longer does.

~~~
mcaruso
Could be wrong here, but I don't think it did. I remember when the feature was
first implemented, and I thought that the fact that you could not select
pseudotext was just a temporary thing while they finished their
implementation. Unfortunately it never happened.

~~~
dom0
Opera did this iirc

~~~
alanh
That was probably it. I knew _one_ of them did.

------
nerdponx
I ask about Pandoc in every Markdown thread, but only because I'm interested
in the success of Markdown.

That said... why not Pandoc? Just too heavyweight for a browser?

~~~
nathancahill
Is there a JS port? I <3 Pandoc and use it to publish projects to PyPI and
Github with one readme.

~~~
nerdponx
No but that would be very interesting.

------
christianmunoz
I'm curious on your intended or expected use cases?

------
Aardwolf
I don't understand the love for markdown. The problem is it ignores a single
line break. Comments on hn and reddit do that too. Result: people posting a
list of things intended to be one per line, instead become concatenated on 1
line with spaces. I know there is a way, two spaces at end of previous line.
That method is hard to maintain if editing, has nothing to do with plain text,
easy to forget, and most don't know.

It should turn a line break into br, then markdown would be alright.

~~~
pvdebbe
With an 's#\n#<br/>#g' substitution you now have to choose between readable
source text (lines < 80 characters) and responsive rendered HTML (lines don't
break until boundaries).

~~~
Aardwolf
Valid point for in text editors and code.

The problem is many input fields in websites trending to use it now. I think
BBCode was more suitable for that. Markdown is easier than BBCode on one hand,
but the newline thing ruins it for simple replies to posts.

------
tejasmanohar
What's the use case? I'd rather go the other way around... Markdown -> HTML

