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