Markdown.css – Make HTML look like plain-text markdown | Hacker News Reader

Markdown.css – Make HTML look like plain-text markdown

mrcoles.com

269 pointsJBiserkov51 comments

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.

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

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.

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.

For one thing I could publish plain markdown as a nerdy blog page and not worry about them 60-character lines break on mobile. I like the look of well formed plain text but it never works elsewhere other than big screens.

Thx! If I recall, I think the blockquotes were the trickiest one in writing this. I used the same repeated element trick and overflow hidden, but getting the line breaks in there was the final missing piece: https://github.com/mrcoles/markdown-css/blob/master/markdown...

Also, your first sentence is asking the wrong question ;P

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)

I agree that this is cool, but it doesn't usefully convert back to plaintext, since the pseudo-elements don't get selected with the rest of the text if you try to copy and paste.

Why does everything need to serve a purpose? I can believe the author wrote this just "Because I Can", which is a perfectly good reason to me. Most stuff I work on in my free time, I do just for me. If I think anybody else might be interested in it, not necessarily because it's useful but just because it's interesting, then I share it.

Edit to add: Not suggesting that you think it needs to serve a purpose, this just felt like the most appropriate thread to add my comment to.

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

It only needs a little JS to make it work, though. You just need to manipulate the selected text as described here http://stackoverflow.com/a/36582615/308851 and https://github.com/niklasvh/jquery.plugin.clipboard here.

1. Take some HTML

2. Use CSS to make it look like Markdown

3. Use JavaScript to make it behave like Markdown.

Why not skip step 2?

Because it's masterful to use CSS for this and the required JS is simple and generic.

Rewriting TeX in Brianfuck would be masterful too. That doesn't make it a good idea.

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

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

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

Probably. So?

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.

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

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

As the author notes, there's a similar project here: 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.

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/dragondrop/ | http://mrcoles.com/tetris/ | http://mrcoles.com/low-res-paint/ | http://mrcoles.com/piano/ — don’t bother asking for a usecase ;)

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

Are you asking for this functionality in the editor or browser or something else? Editors do highlight text as you describe, at least in Emacs in markdown-mode and org-mode. Still, my experiments with variable width fonts in these modes have never stuck. As soon as you need to align anything like a header rule, source code, or table, you need a fixed width font. Then it comes down to whether the mode supports customizing that particular face.

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

[2] https://nanote.co

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

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.

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.

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

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

Why are css content characters not copy/pasteable?

That seems broken.

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

or to actually convert HTML to markdown: https://github.com/leeoniya/reMarked.js

disclaimer: mine

or to convert rich text to markdown: http://markitdown.medusis.com

(same disclaimer!)

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

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

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

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.

Opera did this iirc

That was probably it. I knew one of them did.

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?

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

No but that would be very interesting.

Not sure how pandoc is related to the OP

It converts HTML to Markdown.

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

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.

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

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.

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

Reply on news.ycombinator.com