
Show HN: Devpen – Markdown Editor with GitHub Style - kukuhsain
https://devpen.io
======
fyfy18
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.

~~~
ronilan
_> 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.

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

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

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

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

~~~
amitmerchant
I've implemented this in my app: [http://www.amitmerchant.com/markdownify-
web/](http://www.amitmerchant.com/markdownify-web/)

Additionally, it has a dark mode as well.

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

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

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

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

~~~
kukuhsain
Agree, thanks for the feedback :)

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

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

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

------
NightMKoder
[http://hackmd.io](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. :)

------
ronilan
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...](http://public.docs.xstatic.site.s3-website-us-
west-1.amazonaws.com/__markdown.html#)

------
eevilspock
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/](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.

------
amelius
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?

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

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

------
alexstuckey
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">`.

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

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

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

------
cpb
Consider horizontal splits on mobile devices in portrait mode.

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

~~~
kukuhsain
Fixed. Thanks for the feedback.

------
jxub
Code highlighting would be also a nice feature to add.

------
rezacks
I use [https://hackmd.io](https://hackmd.io) It's free, open source, real-time
collaborative.

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

~~~
kukuhsain
Save button and documentation, noted. Thanks.

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

