Link to source code file on GitHub in code boxes with filenames (#166)
authorMatthias Schmidt <gravatronics@live.com>
Fri, 23 Apr 2021 15:19:17 +0000 (17:19 +0200)
committerGitHub <noreply@github.com>
Fri, 23 Apr 2021 15:19:17 +0000 (17:19 +0200)
Close  #164

docs/stylesheets/extra.css
main.py

index d31c1fcaec2199ff06f31f91ca6736f2a3572857..c8badb5c36186f3ee6e4809fc6e76e1a7f8368e5 100644 (file)
@@ -109,6 +109,7 @@ code, kbd, pre {
     font-size: .85em;
     font-weight: bold;
     padding: 0.5em 1em;
+    position: relative;
 }
 
 .titledCodeBox .codeBoxTitle code {
@@ -118,3 +119,9 @@ code, kbd, pre {
 .titledCodeBox .codeBoxTitle + .highlighttable {
     margin-top: 0;
 }
+
+.codeBoxTitleGitHubLink {
+    position: absolute;
+    top: 0.5em;
+    right: 1em;
+}
diff --git a/main.py b/main.py
index fef165bbddc776f18960c42c82858bb9635c0f2f..8e816f7deb209b6ad3c7c51f8e5ae7faf67fe1a2 100644 (file)
--- a/main.py
+++ b/main.py
@@ -1,11 +1,28 @@
+import materialx.emoji
+from markdown import markdown
+
 def define_env(env):
     @env.macro
     def codebox(title = None, language = "", filepath = None, contents = ""):
         if title is not None:
             if filepath is not None:
+                editLink = f"""{env.variables['config']['repo_url']}tree/{env.variables['config']['edit_uri'].split("/")[1]}/snippets/{filepath}"""
+                icon = markdown(':material-link:',
+                    extensions=['pymdownx.emoji'],
+                    extension_configs={
+                        'pymdownx.emoji': {
+                            'emoji_index': materialx.emoji.twemoji,
+                            'emoji_generator': materialx.emoji.to_svg
+                        }
+                    }
+                ).replace('<p>', '').replace('</p>', '')
+                
                 return f"""
 <div class="titledCodeBox">
-    <div class="codeBoxTitle"><code>{title}</code></div>
+    <div class="codeBoxTitle">
+        <code>{title}</code>
+        <a class="codeBoxTitleGitHubLink" href="{editLink}" title="View on GitHub">{icon}</a>
+    </div>
     ```{language}
     --8<-- "{filepath}"
     ```