Using Vash, add figure and footnote support to markdown WHERE THERE IS NONE.

01-example-footnotes.js

@{
    var imgfigure = (function(){

        var figcount = 0;

        return function(path, caption){
            <figure>
                <a id="fig-@(figcount++)"></a>
                <img src="@path" alt="@caption" /> 
                <figcaption>Fig. @figcount: @caption</figcaption>
            </figure>
        }

    }())

    var fn = function(identifier){
        <sup id="fnref:@identifier"><a rel="footnote" href="#fn:@identifier">@identifier</a></sup>
    }

    var fndef = function(identifier, cb){
        fn.notes = fn.notes || [];
        fn.defindex = fn.defindex || 0;

        fn.defindex += 1;   

        var isfunc = typeof identifier == 'function';

        cb = isfunc ? identifier : cb;
        identifier = isfunc ? fn.defindex : identifier;

        fn.notes.push({ id: identifier, cb: cb });
    }

    fndump = function(){

        <div class="footnotes">
            <hr />

            <ol>
            @fn.notes.forEach(function(n){
                <li id="fn:@n.id">
                    @n.cb()
                    <a rev="footnote" href="#fnref:@n.id">↩</a>
                </li>
            })
            </ol>
    
        </div>
    }

}

# This is a heading!

This is markdown, but macro-ed up! @fn(1) We can use figures and even something as complex as self-linking footnotes. @fn(2)

@imgfigure( 
    "http://kirbysayshi.com/images/ct_big.png",
    "Old Man: Do you dare challenge Lavos? Do you dare to change what has been set in motion?" )

Ho boy, get ready for some footnotes! Even thought they're defined next, they're not output until we call `fndump()`! @fn(3)

@fndef(function(){
    @:Markdown doesn't have macros, but by preprocessing with Vash, we can augment markdown with a lot more than it was ever meant for!
})

@fndef(2, function(){
    @: This syntax is just an experiment. It is by no means meant as "this is a revolutionary way to write footnotes!" `fn` will output a reference to a footnote, while `fndef` actually defines the footnote. `fn` requires an identifier, such as a number or string, that will be used to name the footnote. `fndef` has an optional identifier as the first parameter, and will default to autoincrementing based on position.
})

@fndef(3, function(){
    @: `fndump` actually outputs the footnotes, because Vash currently doesn't have a hook for "template finished" where you could append something.
})

@fndump()

02-example-footnotes.md

This is a heading!

This is markdown, but macro-ed up! ¹ We can use figures and even something as complex as self-linking footnotes. ²

Fig. 1: Old Man: Do you dare challenge Lavos? Do you dare to change what has been set in motion?

Ho boy, get ready for some footnotes! Even thought they're defined next, they're not output until we call fndump()! ³

---

1. Markdown doesn't have macros, but by preprocessing with Vash, we can augment markdown with a lot more than it was ever meant for!

           <a rev="footnote" href="#fnref:1">↩</a>
       </li>
       <li id="fn:2">
            This syntax is just an experiment. It is by no means meant as "this is a revolutionary way to write footnotes!" `fn` will output a reference to a footnote, while `fndef` actually defines the footnote. `fn` requires an identifier, such as a number or string, that will be used to name the footnote. `fndef` has an optional identifier as the first parameter, and will default to autoincrementing based on position.
   
           <a rev="footnote" href="#fnref:2">↩</a>
       </li>
       <li id="fn:3">
            `fndump` actually outputs the footnotes, because Vash currently doesn't have a hook for "template finished" where you could append something.
   
           <a rev="footnote" href="#fnref:3">↩</a>
       </li>
   </ol>
   

03-example-footnotes.html

<h1>This is a heading!</h1>

<p>This is markdown, but macro-ed up! <sup id="fnref:1"><a rel="footnote" href=
"#fn:1">1</a></sup> We can use figures and even something as complex as self-linking
footnotes. <sup id="fnref:2"><a rel="footnote" href="#fn:2">2</a></sup></p><a id=
"fig-0" name="fig-0"></a> <img src="http://kirbysayshi.com/images/ct_big.png" alt=
"Old Man: Do you dare challenge Lavos? Do you dare to change what has been set in motion?" />
 Fig. 1: Old Man: Do you dare challenge Lavos? Do you dare to change what has been set
in motion?

<p>Ho boy, get ready for some footnotes! Even thought they're defined next, they're not
output until we call <code>fndump()</code>! <sup id="fnref:3"><a rel="footnote" href=
"#fn:3">3</a></sup></p>

<div class="footnotes">
  <hr />

  <ol>
    <li id="fn:1">Markdown doesn't have macros, but by preprocessing with Vash, we can
    augment markdown with a lot more than it was ever meant for! <a rev="footnote"
    href="#fnref:1">&acirc;&dagger;&copy;</a></li>

    <li id="fn:2">This syntax is just an experiment. It is by no means meant as "this
    is a revolutionary way to write footnotes!" <code>fn</code> will output a reference
    to a footnote, while <code>fndef</code> actually defines the footnote.
    <code>fn</code> requires an identifier, such as a number or string, that will be
    used to name the footnote. <code>fndef</code> has an optional identifier as the
    first parameter, and will default to autoincrementing based on position. <a rev=
    "footnote" href="#fnref:2">&acirc;&dagger;&copy;</a></li>

    <li id="fn:3"><code>fndump</code> actually outputs the footnotes, because Vash
    currently doesn't have a hook for "template finished" where you could append
    something. <a rev="footnote" href="#fnref:3">&acirc;&dagger;&copy;</a></li>
  </ol>
</div>

README.md

The chain goes like:

example-footnotes.js > example-footnotes.md > example-footnotes.html

You can try this yourself with the following command:

npm install -g vash marked
curl -s https://raw.github.com/gist/3740308/01-example-footnotes.js | vash --render | marked

The above grabs the macro'ed markdown, pumps it into vash, which compiles and renders the template, whose output is then piped into marked for the final conversion of markdown into html.