7 ms·
Markdown.css – Make HTML look like plain-text markdown
- claytron5000 10y agoThis seems... un-useful
- christianmunoz 10y agoI'm curious on your intended or expected use cases?
- kiwidrew 10y agoWhile 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 10y agoThe 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 10y agoThe 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 10y agoIt 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.
- pvdebbe 10y agoFor 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.
- mrcoles 10y agoThx! 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.css#L123 https://github.com/mrcoles/markdown-css/blob/master/markdown... Also, your first sentence is asking the wrong question ;P
- notgood 10y agoIt 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-generated-content-selectable http://stackoverflow.com/questions/19914349/how-can-i-make-g...
- rat87 10y agoWhy are css content characters not copy/pasteable? That seems broken.
- oneeyedpigeon 10y agoProbably because they should only be used for 'decoration' rather than actual content - this is css, after all.
- ComputerGuru 10y agoI 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)
- Retr0spectrum 10y agoI 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.
- clusmore 10y agoWhy 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.
- lisper 10y ago> 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.
- chx 10y agoIt 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 http://stackoverflow.com/a/36582615/308851 and https://github.com/niklasvh/jquery.plugin.clipboard https://github.com/niklasvh/jquery.plugin.clipboard here.
- eridius 10y agoCute. 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 10y agoThere 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.
- Retr0spectrum 10y agoAs 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.
- sergiotapia 10y agoShame you can't select all the selectors for markdown.
- alanh 10y agoIIRC, Firefox used to have this behavior. It no longer does.
- mcaruso 10y agoCould 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.
- nerdponx 10y agoI 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 10y agoIs there a JS port? I <3 Pandoc and use it to publish projects to PyPI and Github with one readme.
- nerdponx 10y agoNo but that would be very interesting.
- daurnimator 10y agoNot sure how pandoc is related to the OP
- nerdponx 10y agoIt converts HTML to Markdown.
- eatonphil 10y agoI 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
- duck 10y agoAnother similar project is http://hackcss.com/ http://hackcss.com/ (which was inspired by this one).
- tejasmanohar 10y agoWhat's the use case? I'd rather go the other way around... Markdown -> HTML
- nkjoep 10y agoYes! 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
- cocktailpeanuts 10y agoI 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.
- leeoniya 10y agoor to actually convert HTML to markdown: https://github.com/leeoniya/reMarked.js https://github.com/leeoniya/reMarked.js disclaimer: mine
- bambax 10y agoor to convert rich text to markdown: http://markitdown.medusis.com http://markitdown.medusis.com (same disclaimer!)
- Aardwolf 10y agoI 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 10y agoWith 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 10y agoValid 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.
- TuringTest 10y agoWhat 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.
- shoover 10y agoAre 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.
- dejawu 10y agoSome 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 10y agoFor a desktop editor, see: http://www.typora.io/ http://www.typora.io/ (non affiliated, I just like it, wanted to write something similar)
- TuringTest 10y agoYes, 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.
- mrcoles 10y agoLol, 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 ;)