Show HN: a distraction-free Markdown editor

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

by chaosprophet • 14 years ago

74 46 14 years ago

pencil.asleepysamurai.com

lowboy• 14 years ago

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.

chaosprophet14• 14 years ago

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

josscrowcroft4• 14 years ago

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

haldean• 14 years ago

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

chaosprophet14• 14 years ago

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• 14 years ago

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

jnar• 14 years ago

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!

bpatrianakos4• 14 years ago

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.

chaosprophet14• 14 years ago

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.

bpatrianakos4• 14 years ago

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.

spindritf• 14 years ago

(Error code: ssl_error_rx_record_too_long)

josscrowcroft4• 14 years ago

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

josscrowcroft4• 14 years ago

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!

josscrowcroft4• 14 years ago

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!

bpatrianakos4• 14 years ago

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.

chaosprophet14• 14 years ago

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.

ricardobeat2• 14 years ago

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.

chaosprophet14• 14 years ago

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.

jello• 14 years ago

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.

chaosprophet14• 14 years ago

Good idea, will make links open in seperate tabs.

bruth• 14 years ago

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• 14 years ago

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

evolve2k• 14 years ago

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

chaosprophet14• 14 years ago

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

Sami_Lehtinen• 14 years ago

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

obilgic• 14 years ago

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

arocks• 14 years ago

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• 14 years ago

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

chaosprophet14• 14 years ago

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.

anonymouz• 14 years ago

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

chaosprophet14• 14 years ago

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.

davvid• 14 years ago

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

chaosprophet14• 14 years ago

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

6ren• 14 years ago

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

chaosprophet14• 14 years ago

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.

etrautmann• 14 years ago

This is fantastic! Any plans to host?

chaosprophet14• 14 years ago

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.

mkilling• 14 years ago

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

scorpion032• 14 years ago

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

gprasanth• 14 years ago

XSS UNCLEAN! DON'T USE!!

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

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

laacz• 14 years ago

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"

Show HN: a distraction-free Markdown editor

Related Stories