Merge pull request #2813 from ZhenShuo2021/gist

✨ Feat: add CSS for gist shortcode

assets/css/compiled/main.css

@@ -4212,6 +4212,55 @@ body.zen-mode-enable {
     display: none !important;
   }
 }
+.gist-container .gist {
+  h1 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .gist-file {
+    border: 1px solid rgb(var(--color-neutral-300));
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .gist-meta {
+    background-color: white;
+    color: rgb(var(--color-neutral-600));
+    border-radius: 0 0 8px 8px;
+  }
+  .gist-meta a {
+    color: rgb(var(--color-primary-600));
+  }
+  .highlight tr {
+    border-bottom: none;
+  }
+  .gist-file .file {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .dark & {
+    .gist-file {
+      border-color: rgb(var(--color-neutral-800));
+    }
+    .gist-data {
+      background-color: rgb(var(--color-neutral-900));
+      border-bottom: 1px solid rgb(var(--color-neutral-800));
+    }
+    .gist-meta {
+      background-color: rgb(26, 26, 26);
+      color: rgb(var(--color-neutral-400));
+    }
+    .gist-meta a {
+      color: rgb(var(--color-primary-400));
+    }
+    .blob-wrapper {
+      filter: invert(0.9) hue-rotate(180deg);
+      background-color: #fff;
+    }
+    .gist-data {
+      background: rgb(26, 26, 26);
+      color: rgb(var(--color-neutral-100));
+    }
+  }
+}
 .a11y-panel-enter-active {
   animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

assets/css/components/gist.css

@@ -0,0 +1,51 @@
+.gist-container .gist {
+  h1 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .gist-file {
+    border: 1px solid rgb(var(--color-neutral-300));
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .gist-meta {
+    background-color: white;
+    color: rgb(var(--color-neutral-600));
+    border-radius: 0 0 8px 8px;
+  }
+  .gist-meta a {
+    color: rgb(var(--color-primary-600));
+  }
+  .highlight tr {
+    border-bottom: none;
+  }
+  .gist-file .file {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* Dark Mode */
+  .dark & {
+    .gist-file {
+      border-color: rgb(var(--color-neutral-800));
+    }
+    .gist-data {
+      background-color: rgb(var(--color-neutral-900));
+      border-bottom: 1px solid rgb(var(--color-neutral-800));
+    }
+    .gist-meta {
+      background-color: rgb(26, 26, 26);
+      color: rgb(var(--color-neutral-400));
+    }
+    .gist-meta a {
+      color: rgb(var(--color-primary-400));
+    }
+    .blob-wrapper {
+      filter: invert(0.9) hue-rotate(180deg);
+      background-color: #fff;
+    }
+    .gist-data {
+      background: rgb(26, 26, 26);
+      color: rgb(var(--color-neutral-100));
+    }
+  }
+}

assets/css/main.css

@@ -6,6 +6,7 @@
 @import "./components/chroma.css" layer(utilities);
 @import "./components/tabs.css" layer(utilities);
 @import "./components/zen-mode.css";
+@import "./components/gist.css";
 @import "./components/a11y.css";
 @import "./components/admonition.css" layer(components);
 

layouts/shortcodes/gist.html

@@ -1,3 +1,5 @@
-<script src="https://gist.github.com/{{- index .Params 0 -}}/{{- index .Params 1 -}}.js{{- if len .Params | eq 3 -}}
+<div class="gist-container">
-    ?file={{- index .Params 2 -}}
+  <script src="https://gist.github.com/{{- index .Params 0 -}}/{{- index .Params 1 -}}.js{{- if len .Params | eq 3 -}}
-  {{- end -}}"></script>
+      ?file={{- index .Params 2 -}}
+    {{- end -}}"></script>
+</div>