Show HN: Devpen – Markdown Editor with GitHub Style | Hacker News Reader

Show HN: Devpen – Markdown Editor with GitHub Style

devpen.io

70 pointskukuhsain41 comments

One thing I’d love is a Markdown editor that has full integration with Google Drive, like how Draw.io does. Changes are automatically saved to Drive so everyone else on your team can see them instantly. Other team members can view and edit the file in Drive just by clicking the file in Drive, they don’t need to install or sign up for anything.

A lot of web based Markdown editors let you save to and import from Google Drive, but I don’t want yet another system to manage files with.

> One thing I’d love is a Markdown editor that has full integration with Google Drive,

That’s not a technical problem.

It’s a market problem, I nicknamed the “pay or pray dilemma of free software”.

To solve your problem you either:

Pay someone to build a solution on top of Google’s interfaces (Drive API/Chrome extension etc.)

- or -

Pray for Google to provide desired functionality. (Or alternatively for some indi developer to provide said functionality for no rational reason other than their own interest in the problem).

The odds of success are not evenly distributed between the two options.

This comment reads like a criticism, but I don't see what anyone did wrong.

It's true that to have a thing, you either have to pay for it or pray for it, or make it onesself.

But before any of that, comes discussion if what would even be a good idea or not. Why does it bother you so much that people talk about what they would like?

Some developers actually want users to discuss what they would like, in order to know what to take a chance on building.

Also, it's a perfectly "rational reason" to build something to provide to the world, when you realize just how much you benefit from the world of things other people have built and given away already.

In fact, what is not very rational, is advertising that you don't consider it rational to contribute to community efforts.

Brian, you are reading it wrong.

That was an observation.

And specifically you are reading the term “no x other than y” wrong.

It actually means x is an attribute of y, or a group, and y is of importance. As in “no player other than LeBron”

It was used in this context in a way similar to “We should send humans to Mars for no rational reason other than to prove that it is technically possible”.

Thus, this comment has no rational reason other than to set the record straight.

It would be cool if it was possible to make a google doc text only, that would basically solve the problem as the primary goal of markdown was to read and write like a normal text file.

It would be especially nice because that way the doc could still use all the cool collaboration features.

Just a note that the drive realtime interface is going away, google for some reason decided to push out third party devs from their drive platform. Building new apps that provide that feature is no longer possible since november last year, and existing apps will stop functioning in January next year.

https://developers.google.com/realtime/deprecation

The first thing I tried were checklists

    - [ ] foo
    - [ ] bar

It's my favorite thing about github style markdown. I doubt you need more ideas for your todo pile, but there's one for you.

Another one would be to add support for LaTeX rendering :)

I've implemented this in my app: http://www.amitmerchant.com/markdownify-web/

Additionally, it has a dark mode as well.

Hi HN,

Imagine that you guys want to write documentation for your project by writing Markdown in Readme.md, to be published on GitHub later.

I'm an Android Dev, and I use a plugin to preview my Readme in Android Studio. And sometimes, I use other online Markdown editor, by doing live editing there. Problem solved, at least for now.

What I've found so far is that those solutions give me different style. And the problem usually arises after that. Sometimes, after updating the Readme.md file and push it to GitHub, there are some parts that are not suitable. Something like, H1 is too bigger for this section, or link is not shown well there, etc.

Devpen is an online tool to solve that problem.

Neat and clean. Bookmarked, will give a try next time I write markdown for GitHub.

You are correct about the incompatible markdown styles on the Internet.

Might be a neat idea to preview the actual editor on your landing page instead of a screen shot.

Good idea! Thanks for the feedback.

Very cool - I've run into the exact problem you described many times in the past and actually considered building something very similar to this.

As a side note, it looks like <img>'s aren't working - try adding something like this:

  <img src="https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />

Making images format correctly in GitHub READMEs has always been a bit of a pain point for me, so this would be a nice feature to have.

Oh yes, good catch. Thanks for the feedback.

This and generally other HTML tag codes aren't supported atm. Otherwise, it looks clean I like it :)

Hi, I've updated Devpen.io, and now it supports img tag, and html tag generally. You can try yourself there :)

Right off the bat, I'd recommend adding a prompt if the window has any user input to prevent fat-finger tab closing (and therefore losing all work). Alternatively, consider using service workers.

Agree, thanks for the feedback :)

And/or persist the buffer as long as possible. Especially from "back button" or browsing to another page and then navigating back.

One of my favorite things about the GitHub editors by far is easy image embedding. You can drag an image file into the textarea and it handles uploading it, and then puts in the correct markdown code for embedding that image. In fact, I consider that single feature the differentiator of Github's markdown editor. I use it all the time at work when wanting to post a screenshot to describe my issue, etc. It was actually the first thing I tried when loading up devpen.io. :)

I realize that feature alone might be costly to build. You'd need somewhere to upload images to, maybe an S3 bucket, and maybe add a CDN, etc. Then you have to deal with abuse/have code to prevent infinitely large uploads, etc. It's not an easy feature, but thought I'd point it out as a potential thing to build. :)

One of those reasons I want IPFS to become a given part of the browser/web/internet infrastructure. If it was integrated as part of the web browser your web app could upload straight the local ipfs daemon. If someone wanted to abuse it they'd literally only be wasting there own disk space. The files would become unaccessible when the browser was closed, but an entire service industry could develop in top of storing you IPFS content across the network, for a small fee, you could even provide that for your users. But no need to worry about that upfront, the users barrier to entry is low, no account creation, no cards, and the content is available to share with other users immediately.

http://hackmd.io is by far my favorite markdown editor. It supports GH style markdown but with even more features: - Slideshow mode - Inline graphviz/MathJAX/mermaid and some other stuff - Collaborative GDocs-style editing (though no out of band comments) - Image upload - PDF export

It’s also somewhat open source (community edition is AGPL). You can host it behind a vpn for internal use.

Admittedly they’re not the most secure editor - e.g. image uploads are technically publicly accessible. Though supposedly there’s an enterprise version coming out with those features at some...point.

Disclaimer: I don’t work with these guys. Just a fanboy at this point. :)

Nicely done.

It’s interesting that such a simple need (editing a readme) is so not trivial.

Anyway, I built a similar tool once, with the github style sheet but with “in place editing” rather than side-by-side (and some other “experimental features”).

You can make a doc using this link if you want to try: http://public.docs.xstatic.site.s3-website-us-west-1.amazona...

I'm pretty sure you can use CSS to make Typora to mimic GitHub style just as well.

https://support.typora.io/Add-Custom-CSS/

EDIT: maybe the existing theme does the trick (I don't use that theme):

> {current-theme}.user.css under theme folder. If you choose Github as your theme, then github.user.css will also be loaded.

Implementation question: does it re-render the entire content on every keystroke? Or is it smarter, and does it re-render only the changed bits?

Judging by React Dev tools with highlighting updates, the whole app updates on keystroke. Even the logo in the top left is flashing.

Yes, re-render the entire content of the Preview side. Not smart yet. Re-rendering only the changed part would be great. I also thought that way, might take quite long time to implement it. So publish now, and improve performance later. So that I know if my solution is really needed by lots of people, before going deep. Thanks anyway :)

Nice! Thanks - I always find myself looking for a GH-flavored markdown editor and I always google for it. devpen.io is easy to remember.

This would be annoying and potentially impossible to get working, depending on GitHub, but it would be neat if you could point this at the URL for a markdown file on GitHub and it would open it up for editing and a PR.

Very nice app. I found myself flicking between edit and preview on GitHub a lot yesterday, and I wanted nearly exactly this!

It would be especially useful if Devpen passed through the small amount of HTML that GitHub allows, such as `<p align="center">`.

Hi, I've updated Devpen, and it supports general HTML now. Thanks for the feedback :)

Buttons seem misaligned https://imgur.com/a/G3TTobk macOS High Sierra 10.13.4, Chrome 67.0.3396.79 (Official Build) (64-bit)

Hmm, the empty space on left side of each button was supposed to be icon from FontAwesome. I think your browser didn't load FontAwesome well.

But that's okay, I've updated Devpen so that FontAwesome icons are now handled properly. Thanks for the report :)

Consider horizontal splits on mobile devices in portrait mode.

I accidentally closed a page I was editing and lost my changes. You should add that thing which throws a confirming alert, which would have saved me.

Fixed. Thanks for the feedback.

Code highlighting would be also a nice feature to add.

I use https://hackmd.io It's free, open source, real-time collaborative.

It's nice, save would be great also a link to the documentation for your flavor of Markdown.

Save button and documentation, noted. Thanks.

Now that vscode has live previews for markdown, I can't imagine having to remember some other app just for markdown.

It's such a nice feature.

This looks nice too, but it's just a limited appeal. Editors are way more intelligent then I ever thought they could get.

Reply on news.ycombinator.com