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

[akharrou]

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 ?

Thanks.

[facelessuser]

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.

[akharrou]

Hey,

So, I've spent some time trying to extract just the relevant scss, compile it to css, and include it in my build, but I seem to be getting it wrong.

---

Here's the scss that I extracted:

.md-typeset {
    a.source-link {
        position: relative;
        top: px2rem(-12px);
        float: right;
        color: var(--md-default-fg-color--lighter);
        transition: color 125ms;

        &:hover {
          color: var(--md-accent-fg-color);
        }

        .twemoji {
            height: px2rem(24px);

            svg {
                width: px2rem(24px);
                height: px2rem(24px);
            }
        }
    }

    div.highlight.md-max-height pre > code {
      max-height: px2rem(300px);
    }
}

and it compiled to this:

/* Normal colors */
.md-typeset a.source-link {
  position: relative;
  top: px2rem(-12px);
  float: right;
  color: var(--md-default-fg-color--lighter);
  -webkit-transition: color 125ms;
  transition: color 125ms;
}

.md-typeset a.source-link:hover {
  color: var(--md-accent-fg-color);
}

.md-typeset a.source-link .twemoji {
  height: px2rem(24px);
}

.md-typeset a.source-link .twemoji svg {
  width: px2rem(24px);
  height: px2rem(24px);
}

.md-typeset div.highlight.md-max-height pre > code {
  max-height: px2rem(300px);
}

then I placed the compiled css under my assets and linked it in my mkdocs.yml as so:

extra_css:
  - assets/extras.css

and this is what I get:

[facelessuser]

Some of that still does not look right. For instance px2rem() isn't a CSS function.

It may be easier to just extract the relevant CSS from the already compiled (and minimized) CSS file: https://github.com/facelessuser/pymdown-extensions/blob/main/docs/theme/assets/pymdownx-extras/extra-aa7dff8003.css.

[facelessuser]

To make it easier, you can unminimize it online: https://unminify.com/.

[akharrou]

I got it ! Thanks man, that was super helpful.

---

.md-typeset a.source-link {
    position: relative;
    top: -0.6rem;
    float: right;
    color: var(--md-default-fg-color--lighter);
    transition: color 125ms;
}
.md-typeset a.source-link:hover {
    color: var(--md-accent-fg-color);
}
.md-typeset a.source-link .twemoji {
    height: 1.2rem;
}
.md-typeset a.source-link .twemoji svg {
    width: 1.2rem;
    height: 1.2rem;
}
.md-typeset div.highlight.md-max-height pre > code {
    max-height: 15rem;
}

---

[facelessuser]

🙂 Glad it is working for you!