Replace [TOC] markers with tables of contents in your exports


#1

Here is a custom template based on “Styled HTML” that will substitute [TOC] markers with tables of contents (mostly for backward compatibility with SEv4).

Value:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{files.0.name}}</title>
  <link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>

{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
  <div class="stackedit__html">{{#transformToc files.0.content.toc}}{{{files.0.content.html}}}{{/transformToc}}</div>
</body>

</html>

Helpers:

Handlebars.registerHelper('transformToc', function (toc, options) {
  var result = options.fn(this);
  var toc = '<div class="toc">' + Handlebars.helpers.tocToHtml.call(this, toc) + '</div>';
  return new Handlebars.SafeString(
    result.replace(/\[toc\]/gi, toc)
  );
});

How to use the table of contents from the side bar?
#2

Sorry to revive the topic, but here it returns an error:
TypeError: options.fn is not a function.

Is it normal?


#3

Maybe you are not using the best approach to activate this mechanism
Suggestion:
in the menu, go to Templates and add a new template, copy and paste the above Template and the above Helper, give a name to your template. (“Styled HML with TOC” is note the good one)
in your document source, add [TOC]
in the menu, export with your new template