use code tag for codeblock filename

Author: alex-shpak

assets/_shortcodes.scss

@@ -223,14 +223,11 @@
   }
 
   .book-codeblock-filename {
-    background: var(--gray-100);
-    border: $padding-1 solid var(--gray-200);
-    border-bottom: 0;
-    font-size: var(--font-size-smaller);
-    margin-top: $padding-16;
+    display: block;
     padding: $padding-4 $padding-8;
-    border-start-start-radius: var(--border-radius);
-    border-start-end-radius: var(--border-radius);
+    border-bottom: 0;
+    font-size: var(--font-size-smallest);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
 
     a {
       color: var(--body-font-color);

layouts/_markup/render-codeblock.html

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