Markdown preview

Rui Carmo 9 years ago updated by Alexander Blach (Developer) 8 years ago 11
You could include discount (http://www.pell.portland.or.us/~orc/Code/discount/) and use it to render a Markdown preview. It lacks Markdown Extra features like footnotes, but covers all of standard Markdown syntax and can easily be merged with Objective-C.


Please add any features (like custom style sheets for preview) you would like to see.

I'd like to know how you use Markdown in your workflow.
Lol, that's exactly what I just implemented. See a screenshot here: http://www.textasticapp.com/images/textastic_markdown_mail.png

It still needs some more work, but you can now do a web preview of the markdown file and even mail the file as html body.

What do *you* use Markdown for?

Anything you want to see implemented in particular?

Currently I don't apply any CSS to the preview which makes the fonts rather large...

Also, there is no syntax highlighting of markdown files yet – but I'm not sure if this is even needed.
It's now also possible to copy the generated html to the clipboard/pasteboard.
You asked, so here it is:

I would like to see a couple options for applying CSS to the preview, say using sans-serif fonts or serif fonts, different families, etc. The app MarkdownNote does this very well. This is a 'must have' feature. The standard webkit HTML styles are painful to look at for very long.

Another option I'd like is live preview, ala MarkdownNote app. It's nice to have a side-by-side like that, but it's not necessary. Label this a 'nice to have' feature.

I do make good use of Markdown Extras, so if you could ever implement those in the preview you'd be a Hero. I don't think anyone has managed that yet on the iPad. This is another 'nice to have' for the vast majority of users, I'm sure.

I would like syntax highlighting. I implemented that in TextMate to make my life easier. It's certainly not needed, but my eyes prefer a difference in color for, for lack of a better way to say it, formatting vs text. This is again a 'nice to have' feature for the vast majority of users. Some may not even want it at all, so it should be a toggle item if you ever do implement it.

How do I use Markdown? Well, I use it all over the place. I use it for my blog posts, for developer notes, task descriptions, and so much more. On my company blog, we have implemented a Markdown editor with live preview in PHP, so I mostly stick to using our built page, but for my personal blog, our developer/support site, and a few other places I use Markdown, I use an editor to type it al up and preview it, then copy/paste into the appropriate web form where it gets parsed on view.

There is one instance where being able to FTP the file straight from Textastic would save a lot of work. I should also mention that while I'm creating/editing theses files, I keep them stored in Dropbox so I'm in sync no matter what device I have at hand for editing at the time. I go back and forth between my iPad, iMac, and MacBook. Dropbox is a godsend for that.

Clear as mud? ;)
Awesome screenshot, I can't wait.

My usage of Markdown is fairly wide-ranging, but I do tend to create fairly complex documents in it, so syntax highlighting is pretty much essential - that's why I use TextMate for writing.

In terms of quantity, most of my Markdown output goes to my web site - I fish out a small template with 5 or so lines of headers and metadata (by the way, a shortcut for inserting the current date in YYYY-MM-DD format would be nice), type up a post adding mnemonic references to links I need to add and footnotes (hence my interest in Markdown Extra, which supports the [^1] notation for footnotes) and finish off by filling in both links and footnotes at the bottom and uploading the file (incidentally, I use .txt, and post to my site directly via Dropbox).

As to stylesheets, I could live just fine with it being a "special" CSS file inside Textastic - it is, after all, a programmer's editor... :)
Please add any features (like custom style sheets for preview) you would like to see.

I'd like to know how you use Markdown in your workflow.
I currently use WriteMonkey on my desktop to generate web documents, .docs, print, and pdf from print using Markdown. But WriteMonkey provides template files (basically CSS) that are applied during export. It would be nice if I could, when generating HTML using Markdown in textastic, specify a CSS file, or at least a stylesheet, that will be applied to the HTML generated in a Markdown file. I don't know if Markdown lets you type the HTML to specify a stylesheet, but it would be nice to just have this sheet sitting around and have it be applied to the exportation (or maybe even the preview? :3 ) dynamically.

I use markdown combined with HTML/js to render data & content loaded dynamically from other sites. Currently I use the pagedown web app for markdown, and this can be done easily by proxying AJAX requests to a remote couchdb server using node.js; however, on textastic, that is not possible due to cross-domain restrictions, what would be amazing is to have HTTP proxy is working inside Textastic to allow for cross-domain XMLHttpRequest Calls, then I would certainly buy the app.

An alternative to having an HTTP proxy working inside Textastic, is to have a custom markdown directive to download the data needed to the local file system, where the markdown preview webkit engine can access.
Since you write that you would buy the app if it supported this: Did you already try it out with Textastic or do you assume that it doesn't work?

Do you have any example code that doesn't currently work in Textastic? That would make it much easier for me to support this.

Thanks Alex; I simply assumed, as it doesn't work on Windows without serious modifications & it is not an advertised feature of textastic to have disabled the same-origin policy (perhaps I missed it). I use markdown combined with jQuery to produce statistical reports. 

Here is a simplest example of the kind of code I want to be able to use:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<div id="test"></div>
<div id="test2"></div>
<script type="text/javascript">


", function(x) { $("#test").html("<pre>" + JSON.stringify(x) + "</pre>"); });

$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=LFtDHHMs3BG_Un2LJhOy0Q&_render=json", function(x) { $("#test2").html("<pre>" + JSON.stringify(x) + "</pre>"); });


Also, the ability to export the Preview in PDF would be helpful, as this is taken for granted on a PC, not sure if this is possible in Textastic.

P.S. I just tested this code on the free Nocs markdown editor and it seems to WORK!! shocking ...  they offer exporting the HTML but does not offer exporting PDF, which is a shame as the HTML does not render properly on PC and the eventual purpose is to be able to print out the view to share with others in a meeting.

$.getJSON is working, silly me; however, general XMLHttpRequest still does not work due to the same origin restriction. For example, to make edits to a remote couchdb.  The window.create & bSave function did not work in MobileSafari or Nocs.

var host = "https://aa.iriscouch.com";
var dbname= "super"
window.create = function(dbname) {
return $.ajax({
type: "PUT",
url: "" + window.host + "/" + dbname,
success: function(json) {
return alert(JSON.stringify(json), {
error: (function(XMLHttpRequest, textStatus, errorThrown) {
return alert("XMLHttpRequest: " + XMLHttpRequest + "\nTextStatus : " + textStatus + "\nError Thrown: " + errorThrown);

var bSave = function (dbname, jsonTable) {
xhr = new XMLHttpRequest();
xhr.open("POST", host + dbname + '/_bulk_docs');
xhr.setRequestHeader('Content-Type', 'application/json');