I'm in the process of writing a programming book in markdown. Would anyone know if it's possible in Markdown Monster to caption code blocks and / or images? Something like this:

Listing 3.2

var x = 1

Softcover flavored Markdown has something along those lines, though you need to bust out LaTEX functionality to do it-- see here

If anyone has done this using MM, maybe a workaround or whatnot I'd love to know more. I'm open to suggestions. Thanks all.

Hi Larry,

It's not natively supported because it's not Markdown, but latex with a custom syntax.

But that doesn't mean you can't add it into the editor explicitly, although the preview is not likely to show it properly.

There are a few options though for getting hte text into the page the way you want.

You can create a Snippet Expansion that creates a block of text that has the boiler plate formatting into which you can just fill the details.

The other is to look around and see if there's not a captioning mechanism that Markdown (unofficially) provides. I think there are a couple of approaches used. But I guess at the end of the day it depends on what your publishing platform requires in order to generate the figure and code captions properly.

+++ Rick ---

Good info, thanks Rick. Completely understand why this wouldn't be supported in MM since it's not standard markdown, however it would be a nice-to-have if the alt-text in an image tag would show as a caption at the top, so those of us authoring books had some idea what they'll look like after publishing.

For instance, at Leanpub they use the alt-text to generate captions: see here

Again, 100% understand why it's not being done now in MM but it would be nice if the alt-text was displayed as a caption at least for images.

For images you can capture the title/alt tag and use some client script in the Preview Template to drop it below the image.

This works for the preview (add it before the </body> tag)

<script>
document.addEventListener("previewUpdated",figureTitles);

function figureTitles() {
  $("img").each( function() {
  var $el = $(this);
  var title = $el.attr("alt");
  if (title)
     $el
      .after("<div style='margin-top: -5px; font-weight: 600;font-size: 0.8em; font-style: italic'>" + title + "</div>");      
 });
}
figureTitles();
</script>
</body>

Keep in mind that unless you export the entire document though this won't show up in the Markdown render output if you publish just the markdown, so this is basically a preview or MM specific export feature.

This is one of the reasons why I don't want to add a bunch of cool features to the Markdown rendering - people see it in the preview and then wonder why it's not showing up when they post to Markdown on Github or on their blog 😃

+++ Rick ---

Looking good Rick, thanks!!