Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Using Vash, add figure and footnote support to markdown WHERE THERE IS NONE.
@{
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()

This is a heading!

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

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?

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


  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>
    
<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>

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment