Remark: Separate HTML and Markdown

[kerim]

I'm wondering if there is someway to separate the HTML file from the Markdown text? Ideally I'd like to do it with something other than a PHP include (the only way I know how) since I'd using this on a USB drive and can't be sure that PHP is installed on whatever computer I might be using. Is there someway to do this in Javascript?

A bit more explanation: I found Remark because I'm using FoldingText, a Markdown based outlining app for OS X. My goal would be to be able to quickly and easy edit presentations entirely within FoldingText. For this reason it would be nice to have the HTML file separate from the MD/TXT file.

Thanks!

[gnab]

Hi!

Using something like jQuery you can load you MD file using AJAX and put the contents inside the remark source div:

$.ajaxSetup({async:false});
$("#source").load("index.markdown")

The ajaxSetup call is needed to make the download of the index.markdown file synchronous, making the browser wait for the download to complete before moving on. Thus, when remark takes over the #source div is already initialized with your Markdown code.

[kerim]

Thanks. Forgive my ignorance, but I'm afraid my coding skills don't include the use of JQuery. This is what I did:

1. I put this in the header:
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
2. I put this in the body:
   <textarea id="source"> $.ajaxSetup({async:false}); $("#source").load("index.md") </textarea>

And I created a file called "index.md"

But when I load the html file I get this:

$.ajaxSetup({async:false}); $("#source").load("index.md")

I guess I'm doing it wrong, but I'm used to PHP, not Jquery...

[kerim]

Well, I spent some time researching and learning jQuery. This is what I have now, but it still doesn't work.

1. In the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript"> $.ajaxSetup({async:false}); $("#source").load("index.md"); </script>

1. In the body:

<textarea id="source"></textarea>

If I understand correctly, the first "Script" calls the jquery code. The second one should have the script which should be activated by the textarea which uses the id "source" - yet that isn't happening?

[kerim]

OK. I learned how to use the javascript console in Chrome and discovered a few things (like the fact that jquery wasn't loading properly from Google). Here is what I have now. But before I continue let me say that this WORKS but only in Firefox, not in Chrome, which seems to have a security block against this method?

1. In the header:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

1. In the body:

<textarea id="source"></textarea> <script> $(document).ready(function() { $('#source').load('index.txt'); }); </script>

So, is there some way that will work in Chrome?

[kerim]

As far as I can tell, the only solution is to run Chrome with security disabled:

chrome.exe --allow-file-access-from-files

on OS X:

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

[gnab]

Please excuse my late reply.

It seems you have solved the problem youself. My jQuery solution was intended for when the remark HTML file is not just opened locally in a browser, but rather hosted on some web server, either locally or somewhere online, like a website or even you Dropbox's public folder.

When opening a HTML file locally, you have to use a solution like the one you've found which overrides Chrome's security settings to allow accessing other local files.

For your specific case, I don't know on any better solution. When editing and viewing the slideshow locally you'll have to override Chrome's settings, and if you plan on publishing the slideshow to a website or similar, it should work just fine as both files will then be addressed by http://... rather than file://....

[kerim]

Thanks. It was good to learn something new - but I'm still eager for a better solution. I'm thinking that one option might be to use Dropbox. My MD files are all saved on Dropbox anyway. But I would need some easy way to lookup the Dropbox URL and enter it in the script on launch… it seems like this would be a very complicated thing to do?

[kerim]

I've created a fork (my first one!) with these changes:

http://kerim.github.com/remark-fork/

But still not what I really want… perhaps I'd be better off with a script that can take a markdown page and generate Remark HTML from it? Anyway, I'm closing this thread.

[gnab]

Basically, all such a script would need to do is basic string concatenation to surround your Markdown with some HTML. I'm not familiar with the FoldingText app you're using, but I guess what you really need is for the final remark HTML file to be generated on every save to your Markdown file.

An alternative, like I've mentioned before, is to start a webserver serving the files, and access the slideshow via that instead of locally:

$ cd MarkdownFolder
$ python -m SimpleHTTPServer

(Based on http://phaq.phunsites.net/2011/07/13/serve-files-quickly-using-built-in-python-web-server-in-os-x/.)

Now, a webserver will be running on port 8000 on your machine, accessable via http://localhost:8000. If MarkdownFolder contains your index.html and index.markdown files, you can go to http://localhost:8000/index.html without having to bother with the --allow-file-access-from-files option you found.

[kerim]

Thanks, but I need something more robust, since I do my presentations on a large number of different shared computers at my university and can't be sure they have python installed. The more I think about it, the best solution would be to host Remark on my webserver and add a PHP function (or other) to load the markdown either from a local file or from a URL (like a dropbox public URL)…

[gnab]

That sounds like a great plan. You could have http://.../presentation-1 that turned into a remark slideshow with the Markdown contents of a presentation-1.md file or something. Loading stuff with jQuery like I proposed initially still requires (in the normal scenario) you to stay at the same domain. That is, if your browser loads a PHP script from http://yoursite.com/slideshows producing HTML that has a $.load("http://dropbox.com/...") inside it, the browser won't let you load it coming from a different domain, so you might have to make your PHP script load the file from Dropbox serverside before passing the whole thing as a combined HTML file to the browser.

[kerim]

True, but I think that's all a bit beyond my scripting ability. I'll keep working on it, but for now it seems easier to use AppleScript to generate a Remark HTML file from a FoldingText document.

I really underestimated how difficult it would be to "include" a text file on localhost. I spent some time exploring about half a dozen ways and but they are all now blocked for security reasons.

I appreciate your help, and I'll let you know if I end up scripting a PHP front-end to do this.

[edbrannin]

@kerim I'm pretty late to this party, in the future you might want to consider using one of the many lightweight HTTP servers out there. I generally prefer adsf, which recently got some flags for only serving to localhost.

[gnab]

74 and #108 both overlap with this issue.

[paven]

<script>
    var slideshow = remark.create({
        sourceUrl: 'outline.md'
    });
 </script>

[kerim]

Thanks @paven that works great. I'm running it on gh-pages now and it seems fine. It did take a litlte trial and error though. For those who need some guidance:

1. remove <textarea id="source"> ... </textarea>
2. Use the code above in place of the existing code at the bottom: <script> var slideshow = remark.create(); </script>

I was even able to move outline.md into an "includes" folder by using includes/outline.md however, I'm wondering if there is any way on gh-pages to generate a dynamic list of all the outlines in that folder and pick one of them from index.html?

[edbrannin]

@kerim This is less about Remark, but I think you could probably make a Jekyll template that renders a JSON list of posts.