simple way to show a "source code" button?

[pchalasani]

Folks, I found a few issues/discussions but cannot get the hang of it. This is the end result I am looking for: Next to a function title (or class, method, etc) there should be a "github" link or "source code" button that takes you directly to the github repo location of that function. [Optional: Even better if there is a way to refer to a specific source code line in github, as part of a doc page. ].

Is this possible with mkdocs/mkdocstrings? if so could someone point me to an example?

I see that the docs of this repo itself have this feature: on the upper right of each doc page there is a source-link, as shown in the screenshot.

Would be great to know how to achieve this. Thanks!

[facelessuser]

This is all assuming the use of the MkDocs Material theme. CSS might need tweaking for other themes in MkDocs.
All of these can be acquired from the source in the documentation. Though getting the decompressed CSS built from SCSS is kind of a pain, I'm sure it can be acquired from inspecting it in the browser. But here is everything so you don't have to dig 🙂.

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

# InlineHilite

Below is (I think) all the CSS needed.

.md-typeset a.source-link{
    position:relative;
    top:-.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
}

[facelessuser]

Oh, you should also be using the attr_list extension. MkDocs Material theme utilizes the Emoji extension to create custom emojis. You may have to manually inject the needed HTML if you aren't using MkDocs material. It's basically just a link wrapped around a specially formatted image.

[pchalasani]

Thanks And yes I definitely use MkDocs Material. I don’t understand anything about css so I will blindly follow these instructions :)

…

On Fri, Jul 22 2022 at 9:20 PM, Isaac Muse < ***@***.*** > wrote: Oh, you should also be using the attr_list extension. MkDocs Material theme utilizes the Emoji extension to create custom emojis. You may have to manually inject the needed HTML if you aren't using MkDocs material. It's basically just a link wrapped around a specially formatted image. — Reply to this email directly, view it on GitHub ( #1762 (reply in thread) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AAEHK2ZX3ZE4OYILCKUE44DVVNCE3ANCNFSM54MAWX3Q ). You are receiving this because you authored the thread. Message ID: <facelessuser/pymdown-extensions/repo-discussions/1762/comments/3210347 @ github. com>

[facelessuser]

I don’t understand anything about css so I will blindly follow these instructions :)

lol, understood. You should be able to copy and paste the code into a CSS file and point to it with the extra_css option in your mkdocs.yml file.

Good luck!

[facelessuser]

Make sure you've configured emoji extension as shown below:

  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

[pchalasani]

Thanks for all the details! Are these auto-generated for every source code file? For example your _inlinehilite seems to be defined in a separate snippets dir... was it generated automatically? It felt like one needs to insert your source-link lines in each doc page manually.

I should have been more clear what I was looking for. I am using this recipe in mkdocstrings to auto-generate doc pages (.md) files for every .py file in the tree. When I go to any any of the function/method docs, I want to be able to see (ideally for each function, or just at the top of the page for that file), a link that says source code and it should take me to the github code page. I actually care less about the look of it, so an Icon would be nice, but not essential. Is there some way to hack the autogenerate script to insert your source-link lines?

[pchalasani]

Hacking the autodoc script to show source links (as regular text hyperlink, not icon) turned out to be easy. At some point I will try to get the icons using your suggestions.

[facelessuser]

Okay, I don't use mkdocs-string, and I wasn't sure originally as you had shown images of what we were doing in our docs. Glad you got something working though.