highlighted file support

assets/css/itix.css

@@ -285,6 +285,30 @@ pre code {
   padding: 0;
 }
 
+/*
+ * Highlighted file has a wrapping div. Some properties are redefined for it
+ * and reset to their default value for its children.
+ */
+.highlightedFile {
+  background: var(--codeblock-background-color);
+  border-radius: 5px;
+}
+
+.highlightedFile .filename {
+  border-bottom: 2px solid var(--hover-menu-border-color);
+  font-family: var(--sans-preferred-font-list) !important;
+  font-size: larger;
+  padding: 12px 15px;
+}
+
+.highlightedFile pre {
+  background: inherit;
+  border-radius: inherit;
+  padding: 12px 15px;
+  margin: 0;
+}
+
+
 pre:hover {
   /* Show the horizontal scroll bar when hovering code (if needed) */
   overflow-x: auto;

i18n/en.yaml

@@ -36,3 +36,5 @@
   translation: Misc.
 - id: show_menu
   translation: Show the menu
+- id: file
+  translation: 'File "%s"'

i18n/fr.yaml

@@ -36,3 +36,5 @@
   translation: Divers
 - id: show_menu
   translation: Afficher le menu
+- id: file
+  translation: 'Fichier "%s"'

layouts/shortcodes/highlightFile.html

@@ -0,0 +1,7 @@
+<!-- This shortcode renders an code block prefixed by a filename -->
+<div class="highlightedFile">
+{{- with .Get 0 -}}
+<div class="filename">{{ printf (i18n "file") . | safeHTML }}</div>
+{{- end -}}
+{{- highlight (trim .Inner "\n") (.Get 1) (.Get 2) -}}
+</div>