Add filename option to codeblocks

assets/_markdown.scss

@@ -71,8 +71,6 @@
   }
 
   pre {
-    direction: ltr;
-    unicode-bidi: embed;
     padding: $padding-16;
     background: var(--gray-100);
     border-radius: $border-radius;

assets/_shortcodes.scss

@@ -260,4 +260,23 @@
       font-size: 3em;
     }
   }
+
+  .book-codeblock-filename {
+    background: var(--gray-200);
+    font-size: $font-size-14;
+    margin-top: $padding-16;
+    padding: $padding-4 $padding-16;
+    border-start-start-radius: $border-radius;
+    border-start-end-radius: $border-radius;
+
+    a {
+      color: var(--body-font-color);
+    }
+
+    + .highlight pre {
+      margin-top: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+  }
 }

layouts/_markup/render-codeblock.html

@@ -0,0 +1,10 @@
+{{- with (index .Attributes "filename") -}}
+  {{- $href := index $.Attributes "href" -}}
+  {{- if $href -}}
+    {{- $href = partial "docs/links/portable-link" (dict "Page" $.PageInner "Destination" $href) -}}
+  {{- end -}}
+<div class="book-codeblock-filename">
+  <a {{ with $href }}href="{{ . }}"{{ end }}>{{ . }}</a>
+</div>
+{{- end -}}
+{{- (transform.HighlightCodeBlock . .Options).Wrapped -}}