search

facelessuser / pymdown-extensions

Extensions for Python Markdown
https://facelessuser.github.io/pymdown-extensions/
Other
949 stars 253 forks source link

How did you get the "Source" and "Edit this page" icon and links to work ? #1356

Closed akharrou closed 3 years ago

akharrou commented 3 years ago

I really like how you got the two buttons "Edit this page" and "Source" on your website and I really want to do something like that, and also have a link to a PDF version of the page. I was wondering how you get that effect ?

image

Thanks.

facelessuser commented 3 years ago

All I do is add this before my first title header:

[:octicons-file-code-24:][_critic]{: .source-link }

# Title

I'm using the attr_list extension to assign .souce-link class to the link. I'm also using the pymdownx.emoji extension to assign the image. In this case though, I'm accessing the Material theme's icon resources by using this Material addition with the emoji extension.

Lastly, I style the icon by targetting the class source-link: https://github.com/facelessuser/pymdown-extensions/blob/main/docs/src/scss/_general.scss#L13. The link provided links to the SCSS source that is then compiled to CSS.

Anyways, that's basically it.

I will go ahead and move this question to discussions as this is neither a bug or feature request.