Add live-preview when editing Markdown files online (BB-3466)

Issue #3491 open
André Thieme
created an issue

In the Overview tab my README.md can be displayed. Unfortunately I have no preview of this, so this might take me several commits to get it right. It would be great if you offered a preview, so that I can write my readme directly in the browser, or at least paste it there to see it. For the issue tracker you already provide such a preview (albeit it is not previewing Markdown, but another format).

Comments (76)

  1. Anonymous

    +1 Hello, dear dev team! :] I know and understand, that you're treating BitBucket like an orphan child (because it is free for most users) and you're focusing all your powers on JIRA. But... did you noticed, that within two days we will celebrate second birthday since this issue was risen? Yes, two years has passed and you did nothing to a feature request, that most of us takes as crucial and fundamental. No matter, if you like this or not, we really need a live preview for all the Markdown edits!

  2. Huu Da Tran

    Using external tools may solve basic Markdown display, but when using specific feature like syntax highlighting, it's another story.

    And of course, using this becomes worse when you take documents from Github and bring it here, it just doesn't work (```lang vs :::lang).

  3. Zachary Davis

    Hi all, we currently offer preview functionality for markdown on all comments, pull request and issue descriptions, and wikis.

    Just to clarify, what is being asked for here is specifically a preview for the README (or, presumably, other markdown files) when editing source online with Bitbucket?

  4. André Thieme reporter

    Yes exactly Zach, when I want to edit a .rst or .md file online, I would love to see a preview before I saw my changes. Because otherwise I will end up with 8 unnecessary commits, cause my readme/docs don’t get displayed as I hoped for. It seems trivial to add this feature, as BitBucket already is able to render such files, and there already are certain preview capabilities implemented. Would be very nice if you could add this.

  5. Stephen Sykes

    Even worse, what works fine in hashify or dillinger fails in the bitbucket README.md file. So I have a README which is poorly formatted, because your formatting is not consistent with standard online tools, and you have no preview of your own.

  6. Fidel Tamondong

    ..or if we can't have a preview feature, it'd be nice if Bitbucket renders *.md files exactly like Hashify, for example, so we could at least see what we're doing there instead.

  7. Merlin Patterson

    +1 especially since Bitbucket has different parsing rules then some of the mentioned preview pages.

    For instance, I did not know Bitbucket required 4 spaces of indentation for sublists.

    Also, while a live preview would be preferred, a confirmation page with the preview on it would work too.

  8. Todd Lyons

    I don't know why exactly, but I have one repo which has a link that allows me to edit the README.md and has a button that shows me the preview of the file. I have several other repos with a README.md that does NOT allow me to edit the README.md. I don't know what the difference is other than when I created the new repo, I created the README.md from the bitbucket webpage, whereas the others probably already existed in an imported git repo.

  9. Georges Haddad

    +1 I just had this issue yesterday of not being able to preview the .md file. What made it worse was that I used an external editor to view what I was doing and then I realized that bitbucket was not rendering the code block syntax correctly (while other markdown editors were) If I had a preview I would have adjusted to the lack of syntax support.

  10. Anonymous

    +1 This is all to common everywhere else for it to not be a feature. Also, I can't believe it was requested 5 years ago but nothing has happened...

  11. jonathan maurice

    Just came here, see it's been 5 years already. It seems impossible to find an online tool that matches bitbucket syntax exactly so there is always this suspense when you edit your files. Is it good ? How many ridiculous commits will be necessary ? I just created a private dummy repo to test my md file... So weird.

  12. Georges Haddad

    Wiktor Tomczak, in Bitbucket on the "Overview" section of a repo there is the display of your standard Readme.md that gets shown. Right there on the page there is a link "Edit README" if you click on that you will get a md editor and preview.

    Oddly enough if you browse the source code and edit the README.md file from there, then there is no preview.

    So it seems like Bitbucket has this capability to preview markdown but it is on one place.

  13. Alexander J. Summers

    I think the ability to preview the repository readme file has been there for a long time, but .md files in a repository can't be previewed (even though they can also be edited via the web interface).

  14. Jon Gorrono

    This is killing me :) I need a preview in order to edit effectively and not add commits to my edit cycle. If I use another markdown previewer tool, Bitbucket does not render it (in some cases, even remotely) like the preview tool does. If bitbucket adds it's own flavors it needs it's ow previewer. README's are a luxury to me now: for times when I have nothing other than mucking with markdown edit cycles to do.

  15. Chris Wyse

    Just tried to update a README.md. Went to Bitbucket, thinking I'd be able to see the Markdown with a WYSIWYG. Hit the Edit button, and got straight text. No big deal - continued to edit, finished. Options at that point are Commit or Diff - no Preview. Thought maybe the Commit button would provide a preview before I finalized it, but no luck. Did a quick Diff to see what I changed. Hit the back button - WRONG. Dropped me back to the original file view. Needed to hit Cancel instead (even though it's not a dialog box). All changes lost.

  16. Chris Wyse

    I have a partial solution for the Bitbucket markup. I researched the engine and extensions they use (python-markdown). I found a utility that uses python markdown that starts a local web server, and lets you edit your Markdown and see the results. After adding support for the extensions that Bitbucket uses, it seems to map identically (although I Atlassian extensions would not be available). The tool looks pretty reasonable.

    Here's how to install it: pip install markdown-editor

    To run it, you need to add parameters for the required extensions, which you can put in a simple script. Here's the command: markdown_edit -s -x markdown.extensions.codehilite -x markdown.extensions.tables -x markdown.extensions.def_list x markdown.extensions.footnotes -x markdown.extensions.headerid -x markdown.extensions.sane_lists -x markdown.extensions.abbr -x markdown.extensions.fenced_code -x markdown.extensions.toc -x markdown.extensions.wikilinks README.md

    It's pretty disappointing that I need to start up a local web server, copy existing markdown from bitbucket, edit it in the local web server, copy the corrected version of the markdown, and paste it back into bitbucket. It's amazing to me that such basic functionality is not available, especially since I was able to obtain the desired function from open source projects.

  17. Chris Wyse

    FYI... There are other online markdown editors available. However, the solution above maps the output very closely to what Bitbucket produces. There are so many markdown variations, that it's hard to find a solution that maps well.

  18. Alex Githatu

    We need a preview button before commit. I've just had to do several trivial commits correcting typos and omissions that could have been easily handled in a series of Edit-Preview cycles.

  19. Jonathan Gregson

    Since Bitbucket seems to have no idea how to render a MD list, it is vital that I have a previewer to troubleshoot the issue. Having 15 "edited readme" commits on a production branch makes us all look foolish.

  20. Vasyl Boroviak

    This issue is 5 years old. We should start a Kickstarter campaign, collect 2K AUD, pay Atlassian for the feature. It would take 6 months but we'd get there 10 times faster. Sounds like a solid plan?

    (jk)

  21. Log in to comment