top | item 4890196

Show HN: a distraction-free Markdown editor

74 points| chaosprophet | 13 years ago |pencil.asleepysamurai.com | reply

46 comments

order
[+] chaosprophet|13 years ago|reply
Mods, please put back the word SideProject into the title. I don't want people thinking this is a hosted service or something like that. On a related note, why was the post title modified at all?

For reference, the original title I submitted was 'Show HN: Sideproject - I built a distraction free Markdown editor last weekend'. Seriously, the moderating is getting quite heavy handed here.

[+] bpatrianakos|13 years ago|reply
Okay, so I have to say I'm totally jealous right now! I made the exact same thing for the exact same reason, with the exact same basic idea behind it, submitted it 3 times, and got just about no attention. On top of that, this interface is better so I'm jealous of that. Mine even has a few more bells and whistles. (I'm doing it, I'm gonna shamelessly plug it right here - shamelessly - https://writeapp.me).

But despite my jealousy and, I must admit, bitterness, I have to say nice work. I (hate to say :) ) I really like this.

[+] chaosprophet|13 years ago|reply
Glad you like it :) I actually did see your app during mmy search for the best distraction free editor, but then I decided it had too many features for me, and I really did not want to signup to use it. So thats why I made Pencil.

Btw, you should totally use hnpickup to find the correct time to submit to HN. Worked like a charm for me.

[+] spindritf|13 years ago|reply
(Error code: ssl_error_rx_record_too_long)
[+] josscrowcroft|13 years ago|reply
The "Saved!" dialog gets a little pesky when repeatedly clicking around or focusing/unfocusing. I think it could just be displayed somewhere on the screen.

But I love the editor - congrats!

If you feel like going more advanced, it'd be amazing to be able to edit while in preview mode - this could be done with contenteditable I think, and the changes merged back into markdown when exiting preview mode...

[+] chaosprophet|13 years ago|reply
Yeah, I could probably put it in the corner same as the Previev mode indicator. Good idea, will get to it.

As for editing in the preview mode, that kinda goes against the whole reason I made this. I want it to be simple and minimal. Markdown also happens to be great for writing, since it doesn't look too different from plain text, ergo you don't get distracted by how your text looks.

[+] chaosprophet|13 years ago|reply
Okay, I have implemented the following changes suggested here:

1. Fixed the space+shift=tab bug.

2. Fixed the inconsistent mode jumping and saving bug.

3. File Saved prompt is only shown the first time the file is saved. For subsequent saves, a label is displayed in top left corner.

4. Links are opened in a new tab so as not to lose unsaved work.

Also, I have cleaned up the code slightly and open sourced it using the MIT license. [https://github.com/asleepysamurai/pencil]

Fork, change and send me a pull request and I'll gladly look into it.

[+] ricardobeat|13 years ago|reply
It's behaving a little weirdly.

- I have no idea how to make 'preview' button come up (and it doesn't look clickable when it does)

- Sometimes it inserts a tab character instead of a space in the middle of a sentence

- What causes it to save and how do I avoid the repeat prompt?

- How do I get the URL for sharing?

Overall it's nice, but it could do with some (auto-hide) UI for save/edit/preview.

[+] chaosprophet|13 years ago|reply
1. It's not a button. It's just a label to indicate that you're in preview mode. You get in and out of preview mode by hitting ctrl+p or clicking the empty right margin.

2. It inserts a tab when you hit shift+space. I initially put this in because I thought it would be an easy way to get tabs on the iphone, but apparently the ios shift key is not really a sift key so it doesnt work on the iphone anyway. Have to remove this.

3. Ctrl+s or click the empty left margin to save. The repeat prompt will be changed to prompt on first save only soon.

4. The url to share is the one in the addressbar.

[+] laacz|13 years ago|reply
What I look for in a great online markdown editor? Since that is plaintext editor, it should behave like one.

You should give it distinctive syntax higlighting feature. Ace, for example, is great with that. You should provide easy way to indent/unindent text blocks with four spaces (tab and shift+tab). Operations with selections (linkify selected text, turn current paragraph into code section or, if i may, header).

Also, images. See latest Github take on images drag'n'drop [feature][1]. That would, of course, require server-side support.

I can write markdown in textarea. But I'd rather do that in proper editor which more or less looks and acts like one :)

[1]: https://github.com/blog/1347-issue-attachments "Github Issue Attachments"

[+] lowboy|13 years ago|reply
What is Markdown specific about this? Using Chrome stable on Win 7, I don't see any of the Markdown I'm typing being converted or doing anything other than sitting there, being Markdown code.
[+] chaosprophet|13 years ago|reply
Hit ctrl+p to goto preview mode. Markdown is rendered only in preview mode.
[+] bruth|13 years ago|reply
On the topic of Markdown.. here is previewer I wrote a while back: http://marky.devel.io It includes a few extensions for my common needs (click the Show Example link in the preview area). It comes in handy for seeing how things _will_ look (like GitHub READMEs) or for creating quick syntax-highlighted code samples for copy and pasting into slide decks.
[+] agumonkey|13 years ago|reply
As much as I like the minimal/darkroom approach of OP's (et al.) idea, the constant swapping between preview and edit is painful, this calms me. Let's embrace reactive transparent update (BrettVictor style).

: the update delay is a tiny bit high for my taste, or maybe just lacks communications/notifications, a tiny gizmo (spinner, led, hud..).

[+] davvid|13 years ago|reply
This is sweet. I have a small suggestion. Can you make it use a fixed-width font in the editor by default? Or maybe a way to set the font? Ubuntu Mono, Monaco, etc. would be make it so much nicer.

I noticed this when I tried to do this:

    Markdown
    ========
but the = signs weren't lining up. Drives me nuts! (I must have OCD ;-)
[+] chaosprophet|13 years ago|reply
Personally, I find fixed width fonts terrible for readablity. In fact, I even use proportional fonts in my text editor (while programming). It has really helped me a lot, esp. given my weak eyesight. So, no I am not going to put fixed width fons in there. But hey, it's open source. Fork and change to whatever font you prefer :)
[+] haldean|13 years ago|reply
This is awesome! I love the interface. Any chance you'd consider open-sourcing it?
[+] chaosprophet|13 years ago|reply
Well, there are a few ugly bits in it, should be a couple of hours work to clean and document. I'll get around to it either this weekend or the next. Glad you liked it.
[+] jbranchaud|13 years ago|reply
Agreed, I would really love to fork this on GitHub and play around with the implementation and features!
[+] jello|13 years ago|reply
Nicely done. However, I would strongly recommend making all links from preview mode open in a new tab, since you lose all unsaved progress whenever you navigate away. Or you could do an "onbeforeunload" check instead.
[+] chaosprophet|13 years ago|reply
Good idea, will make links open in seperate tabs.
[+] jnar|13 years ago|reply
Well, let me say: love it.

Very good idea, if you will open source it i'll consider using it as standard interface on a project i have (with your permission obviously :)) That said, awesome job!

[+] arocks|13 years ago|reply
Excellent idea. Some suggestions:

- Syntax highlighting, with subtle colors

- A dismissable help popup in the beginning

- Some means of getting a clean HTML output

[+] huhtenberg|13 years ago|reply
I think you are missing the whole point. This is a _distraction free_ _markdown_ editor.
[+] gprasanth|13 years ago|reply
XSS UNCLEAN! DON'T USE!!

[Bam!](javascript:alert(1);)

[](Any url in here) should be xss cleaned. But it isn't!

[+] evolve2k|13 years ago|reply
Any tips in how to use this on the iPhone, as obviously the keyboard shortcuts are a little tricky.
[+] chaosprophet|13 years ago|reply
Tap the right edge of the screen to enter/exit Preview mode. Tap the left edge of the screen to save. Cheers!
[+] mkilling|13 years ago|reply
Love it! What I'd need to adopt it is Dropbox integration, possibly using filepicker.io
[+] anonymouz|13 years ago|reply
Dragging the scroll bar puts me into edit mode. This is rather irritating.
[+] obilgic|13 years ago|reply
Good start, but ui/interactions/color schemes can definitely be improved
[+] scorpion032|13 years ago|reply
You should make this a Chrome app and something that works offline.