From beabb36d7f393bce8d603371e7003cc5389bd265 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 15 Sep 2021 22:50:28 +0800
Subject: [PATCH] Add custom title to code block

---
 _includes/refactor-content.html | 41 ++++++++++++++++++++-------------
 _sass/addon/syntax.scss         | 14 ++++++++---
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 9232129..a32407c 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -104,30 +104,39 @@
 
 <!-- Add header for code snippets -->
 
-{% if _content contains '<div class="language-' %}
-  {% assign _code_splits = _content | split: '<div class="language-' %}
-  {% assign _new_content = nil %}
+{% if _content contains '<div class="highlight"><code>' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
+  {% 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 _replacement = '-rouge"><div class="code-header" data-lang="'
-          | append: _lang
+
+      {% assign _left = _snippet | split: '><' | last%}
+
+      {% 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 %}
+  {% assign _content = _new_content %}
 
 {% endif %}
 
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 2a84b1b..f4b1db5 100644
--- a/_sass/addon/syntax.scss
+++ b/_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