search

mixu / markdown-styles

Markdown to static HTML generator and multiple CSS themes for Markdown
1.85k stars 251 forks source link

Differentiating between different headers (h1, h2, h3, etc) #29

Closed mixinmax closed 8 years ago

mixinmax commented 8 years ago

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.

mixu commented 8 years ago

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

mixu commented 8 years ago

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

mixinmax commented 8 years ago

Just put in a pull request. Let me know what you think.