diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index 58e02b3..3f40f59 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -71,8 +71,6 @@
   }
 
   pre {
-    direction: ltr;
-    unicode-bidi: embed;
     padding: $padding-16;
     background: var(--gray-100);
     border-radius: $border-radius;
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 89b7da0..3a19735 100644
--- a/assets/_shortcodes.scss
+++ b/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;
+    }
+  }
 }
\ No newline at end of file
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
new file mode 100644
index 0000000..a79563f
--- /dev/null
+++ b/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 -}}