The Matlab publishing tool and Jekyll combined

I am in the middle of generating a set of tailored Matlab tutorials for a colleague. We decided that the best way to communicate the work was by using Matlab’s integrated publishing facility. This is a great tool that allows you to generate HTML pages directly from Matlab scripts. Code is highlighted nicely and screenshots of any figures generated are linked in the generated HTML.

I am also a massive Dropbox fan. This is a file synchronisation service that can act as a static website server. Dropbox has a public folder. The Matlab generated HTML can be dropped into this folder and then the public link to the file can be shared. This makes for a very neat and straight forward way to distribute Matlab published documents. However, there are a couple of very minor drawbacks. Firstly, the static html hosting service provided by Dropbox is more of a side effect of the public folder than a supported service. Dropbox makes no guarantees about service uptime or reliability. This would probably never be a problem for the scenario outlined here, but seeing as I generate this site using Jekyll(https://github.com/mojombo/jekyll/wiki) and host it at Github, I thought I would try to combine the two.

This turns out to be incredibly simple. All you need to do is copy the “HTML” folder generated by Matlab into the root directory or any new subdirectory of your Jekyll project. You can then just add the YAML Front matter to the top of the HTML file. In my case the following …

---
layout: main
title: Tutorial xyz
---

… and then Jekyll will render the Matlab published document in your site. The problem is that the Matlab HTML file will likely override some of your own CSS, and so the formatting may be a little off. However, this is very simple to rectify. In my case, I just deleted the following block of code.

body {
  background-color: white;
  margin:10px;
}

h1 {
  color: #990000; 
  font-size: x-large;
}

h2 {
  color: #990000;
  font-size: medium;
}

/* Make the text shrink to fit narrow windows, but not stretch too far in 
wide windows. */ 
p,h1,h2,div.content div {
  max-width: 600px;
  /* Hack for IE6 */
  width: auto !important; width: 600px;
}

I left the rest in, as I quite like he Matlab code formatting. It differentiates the code blocks in the Matlab pages from the code blocks in the blog. If you don’t want to give the mathworks any free advertising you can remove the following too.

<p class="footer"><br>Published with MATLAB&reg; 7.10<br></p>

Happy static site generating!