Add custom title to code block

_includes/refactor-content.html

@@ -104,30 +104,39 @@
 
 <!-- Add header for code snippets -->
 
-{% if _content contains '<div class="language-' %}
+{% if _content contains '<div class="highlight"><code>' %}
-  {% assign _code_splits = _content | split: '<div class="language-' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
-  {% assign _new_content = nil %}
+  {% assign _new_content = '' %}
+
+  {% for _snippet in _code_spippets %}
+
+    {% if forloop.last %}
+      {% assign _new_content = _new_content | append: _snippet %}
 
-  {% for _snippet in _code_splits %}
-    {% if forloop.first %}
-      {% assign _new_content = _snippet %}
     {% else %}
-      {% assign _lang = _snippet | split: ' ' | first %}
+
-      {% capture _tag_head %}<div class="language-{% endcapture %}
+      {% assign _left = _snippet | split: '><' | last%}
-      {% assign _replacement = '-rouge"><div class="code-header" data-lang="'
+
-          | append: _lang
+      {% if _left contains 'file="' %}
+        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+      {% else %}
+        {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+      {% endif %}
+
+      {% assign _new_content = _new_content | append: _snippet
+          | append: '<div class="code-header" text-data="'
+          | append: _text
           | append: '"><button data-original-title="'
           | append: site.data.locales[lang].post.button.copy
-          | append: '"><i class="far fa-clone"></i></button></div><div class="highlight">'
+          | append: '"><i class="far fa-clone"></i></button></div>'
+          | append: '<div class="highlight"><code>'
       %}
-      {% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
+
-      {% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}
     {% endif %}
+
   {% endfor %}
 
-  {% if _new_content %}
   {% assign _content = _new_content %}
-  {% endif %}
 
 {% endif %}
 

_sass/addon/syntax.scss

@@ -172,14 +172,22 @@ div {
   align-items: center;
   line-height: 1.85rem;
 
-  // language badge
+  // text data
   &::before {
-    content: attr(data-lang);
+    content: attr(text-data);
     color: var(--lang-badge-color);
+    padding-left: 1em;
+
+    // language
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
-    padding-left: 1em;
+
+    // file name
+    @at-root [file] #{&} {
+      font-size: 0.85rem;
+      text-transform: none;
+    }
   }
 
   // clipboard