Show HN: a distraction-free Markdown editor | Hacker News Reader

Show HN: a distraction-free Markdown editor

pencil.asleepysamurai.com

74 pointschaosprophet46 comments

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.

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.

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.

I feel like Hnpickup is cheating though. But I'm glad you saw mine and too many features is a totally legit reason to not use it. In fact, sometimes you just want to make your own thing no matter what's out there.

You don't actually need hnpickup. Just remember to post in the morning or late evening PST.

Since we're here: I'm immediately put off from writeapp for two very simple reasons: 1) very cluttered homepage, everything is extremely verbose 2) requires sign-up (and no OAuth) before I can see anything.

Can you imagine github's homepage with a "Publish git repositories and make them available for co-workers and contributors to commit, track issues and send patches to" in big bold letters? You are in desperate need of better copy.

The actual app is nice, I prefer it's UI over the OP's. Other issues: Museo in the preview doesn't look that good, the options button is not working, and I can't figure out how to get a public link to a post.

(Error code: ssl_error_rx_record_too_long)

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

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.

Threw this together to preview markdown HTML elements - posted here in case it saves anybody some time:

http://pencil.asleepysamurai.com/hag56udxkx#p

If someone edits it I suppose it'll no longer be there, but so be it!

Actually, that makes me think - a feature suggestion if possible, would be to "lock" a markdown file to editing (only Preview mode available), and require a password to edit.

This would make the app super useful for a quick-and-nasty publishing solution (similar to gist or pastebin, but also for random thoughts). Good luck!

If you like gists, markdown, and quick-and-nasty publishing: http://gist.io/

I'd still prefer something like this for the actual drafting, of course.

I followed the link to try to edit it (I wasn't going to save it, I was just curious) and I have to say that on second use, I'm having trouble figuring out how to move from Preview mode to edit mode. Clicking outside the content area seems to move it into preview mode but then no matter what I try I can't get anything editable again.

Maybe its just my OS/browser combo or something. Maybe adding a few instructions somewhere would help.

Ctrl+p to move in and out of preview mode. Or click the empty margin to the right side of the text.

Right, I got the empty margin thing but it seems to behave pretty inconsistently for me. I'm using a pretty small screen. Maybe that's the deal? 11 inch Macbook Air. I don't know. Maybe it's probably one of those real isolated problems.

Inconsistent as in not changing modes when clicked or changing modes when clicked in places other than the margin?

I suspect it's the latter and I think I know why it's happening. Will fix soon.

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.

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.

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.

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"

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.

Hit ctrl+p to goto preview mode. Markdown is rendered only in preview mode.

Oh neat! Recommend putting that on the demo, maybe faintly in the corner, I didn't figure it out.

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.

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

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

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

This is awesome! I love the interface. Any chance you'd consider open-sourcing it?

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.

Agreed, I would really love to fork this on GitHub and play around with the implementation and features!

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.

Good idea, will make links open in seperate tabs.

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!

Excellent idea. Some suggestions:

- Syntax highlighting, with subtle colors

- A dismissable help popup in the beginning

- Some means of getting a clean HTML output

I think you are missing the whole point. This is a _distraction free_ _markdown_ editor.

Check out: http://jottit.com/ and http://pen.io/

XSS UNCLEAN! DON'T USE!!

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

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

Any tips in how to use this on the iPhone, as obviously the keyboard shortcuts are a little tricky.

Tap the right edge of the screen to enter/exit Preview mode. Tap the left edge of the screen to save. Cheers!

Love it! What I'd need to adopt it is Dropbox integration, possibly using filepicker.io

Dragging the scroll bar puts me into edit mode. This is rather irritating.

Good start, but ui/interactions/color schemes can definitely be improved

You should make this a Chrome app and something that works offline.

This is fantastic! Any plans to host?

Right now, I don't really have any plans. But if it gets popular enough and if people would actually pay for it, then maybe a hosted service might happen.

suggestion: auto-linkize URLs (it linkizes []() syntax, but not plain urls)

Pencil uses markdown.js to render markdown. Unfortunately markdown.js does not yet have support for the Redcarpet dialect (a.k.a. Github Flavoured Markdown) which supports auto-linkifying. I'll probably fork markdown.js to add Redcarpet support sometime soon.

Reply on news.ycombinator.com