Differentiating between different headers (h1, h2, h3, etc)
mixinmax opened this issue · 3 comments
Is there a way to differentiate between the different headings so that I have can smaller headers indented in the sidebar via css? Right now all headings render to an anchor in a list item for the sidebar. Would it be possible to add a unique class to each type of header so that they can be styled?
If no one has time to do this, I can make the change as long as someone points me in the right direction.
should be easy - just override the toc partial in your layout
https://github.com/mixu/markdown-styles#metadata-sections
If you take a look at the {{~> toc}} built in partial, you can see that it is actually iterating over a metadata field called headings using the same syntax. The headings metadata is an array of objects with an id field (the HTML anchor id), a text field (the heading text) and a depth field (the depth of the heading, e.g. the number of # characters in the heading).
https://github.com/mixu/markdown-styles#partials
You can override the toc partial by adding ./partials/toc.html as a partial in your custom layout
would be cool to get the CSS for this and it might be worth baking in support for this as a default, feel free to file a PR
Just put in a pull request. Let me know what you think.