Numbering and referencing images in Pandoc

Question

I would like to add captions such as "Figure 1: Blah Blah" to my images in Pandoc and be able to refer to them like see @Figure1. I am using gpp (a pre-processor) to add captions to my images and do all sorts of fancy things like change size, format etc. However, I am unable to implement a counter for images like Figure1, Figure2, etc.

I have defined the following function in my gpp script:

\define{\counter}{0}

\defeval{count}{\eval{\counter+ 1}

and I call it like this in my script: \count

However, \counter doesnt get evaluated in my gpp script and I see the following error: unfinished macro

How should I implement this counter? I am using -T (tex) mode in gpp

Answer 1

I have found a somewhat partial solution to my problem. I found that using CSS's counter-increment property can help to auto-number images like so: http://www.w3schools.com/cssref/pr_gen_counter-reset.asp

However, the problem remains that I am using gpp to copy the same piece of code everytime my gpp tag is called. Therefore, the counter would never increment. For eg: my gpp code is:

\define{\image{src}{width}{caption}{tag}}{

<div style=" margin:50px auto; text-align:center;" class="figures">
<a  href="\src" id="\tag" style="margin:0px 20px; display:inline-block; 
text-decoration:none; color:black; "><img src="\src" width="\width px" 
alt="\caption" style="padding-bottom:0.5em;"> <div> \caption </div></a></div>}

\define{\imageref{label}}{
<span style="white-space:nowrap;"><a href="#\label" style="display:inline-block">\label</a></span>
}

My style.css looks like this:

div .figures{
counter-reset:figure;
}

a.figure-caption:before{
counter-increment:figure;
content: "Figure" counter(figure) ":";
}

Therefore, everytime I include a picture with the tag \image, it always gets the counter Figure1