zopyx/gist:908339afda98b5044cd4b26623a456e2

## gistfile1.txt
<html>
    <head>
        <script type="text/javascript" src="./jquery-2.2.4.min.js" ></script>
        <script type="text/javascript" src="https://mozilla.github.io/nunjucks/files/nunjucks.js"></script>
        <style type="text/css">
            @page {
                @bottom-center {
                    content: counter(page);
                }
            }
            #toc {
                font-weight: bold;
                font-size: 2em;
                page-break-after: always;
            }
            h1 {
                page-break-after: always;
            }

            a[href]::after{
                content: " Page " target-counter(attr(href), page) ")";
                color: green;
            }
        </style>
    </head>
    <body>
        <div id="toc">
            <div id="content"></div>
        </div>
        <h1 id="c1">Chapter One</h1>
        <h1 id="c2">Chapter Two</h1>
        <h1 id="c3">Chapter Three</h1>
        <script id="template" type="nunjucks">
            <span class="toc">Table of Contents</span>
            <ul>
                {% for item in items %}
                    <li>
                      <a href="#{{item.id}}">{{item.text}}</a>
                    </li>
                {% endfor %}
            </ul>

        </script>

        <script type="text/javascript">
            var template = $('#template').html();

            var items = [];
            $('h1').each(function() {
                var d = {
                    id: $(this).attr('id'),
                    text: $(this).html()
                };
                items.push(d);
            });

            var params = {
                items: items
            }
            nunjucks.configure({ autoescape: true });
            var rendered = nunjucks.renderString(template, params);
            $('#content').html(rendered);
        </script>

    </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="./jquery-2.2.4.min.js" ></script>
	<script type="text/javascript" src="https://mozilla.github.io/nunjucks/files/nunjucks.js"></script>
	<style type="text/css">
	@page {
	@bottom-center {
	content: counter(page);
	}
	}
	#toc {
	font-weight: bold;
	font-size: 2em;
	page-break-after: always;
	}
	h1 {
	page-break-after: always;
	}

	a[href]::after{
	content: " Page " target-counter(attr(href), page) ")";
	color: green;
	}
	</style>
	</head>
	<body>
	<div id="toc">
	<div id="content"></div>
	</div>
	<h1 id="c1">Chapter One</h1>
	<h1 id="c2">Chapter Two</h1>
	<h1 id="c3">Chapter Three</h1>
	<script id="template" type="nunjucks">
	<span class="toc">Table of Contents</span>
	<ul>
	{% for item in items %}
	<li>
	<a href="#{{item.id}}">{{item.text}}</a>
	</li>
	{% endfor %}
	</ul>

	</script>

	<script type="text/javascript">
	var template = $('#template').html();

	var items = [];
	$('h1').each(function() {
	var d = {
	id: $(this).attr('id'),
	text: $(this).html()
	};
	items.push(d);
	});

	var params = {
	items: items
	}
	nunjucks.configure({ autoescape: true });
	var rendered = nunjucks.renderString(template, params);
	$('#content').html(rendered);
	</script>

	</body>
	</html>