From 8e5d8b89313c4890fb3314c558b823812dc594b8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 18 Dec 2020 20:32:07 +0800
Subject: [PATCH] Feature: display the language of code snippets

---
 assets/css/_addon/syntax.scss  | 17 +++++++++++++++++
 assets/js/_utils/lang-badge.js | 20 ++++++++++++++++++++
 assets/js/post.min.js          |  2 ++
 3 files changed, 39 insertions(+)
 create mode 100644 assets/js/_utils/lang-badge.js

diff --git a/assets/css/_addon/syntax.scss b/assets/css/_addon/syntax.scss
index 5e63b8a..575df05 100644
--- a/assets/css/_addon/syntax.scss
+++ b/assets/css/_addon/syntax.scss
@@ -148,3 +148,20 @@ div {
     }
   }
 }
+
+[class^='language-']::before {
+  content: attr(lang);
+  position: absolute;
+  right: 1.8rem;
+  margin-top: 3px;
+  font-size: .7rem;
+  font-weight: 600;
+  color: var(--highlight-lineno-color);
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  [class^='language-']::before {
+    right: 3.1rem;
+  }
+}
diff --git a/assets/js/_utils/lang-badge.js b/assets/js/_utils/lang-badge.js
new file mode 100644
index 0000000..845721a
--- /dev/null
+++ b/assets/js/_utils/lang-badge.js
@@ -0,0 +1,20 @@
+/**
+ *  Add language indicator to code snippets
+ */
+
+$(function() {
+  const prefix = "language-";
+  const regex = new RegExp(`^${prefix}([a-z])+$`);
+
+  $(`div[class^=${prefix}`).each(function() {
+    let clzsses = $(this).attr("class").split(" ");
+
+    clzsses.forEach((clzss) => {
+      if (regex.test(clzss)) {
+        let lang = clzss.substring(prefix.length);
+        $(this).attr("lang", `${lang}`);
+      }
+    });
+
+  });
+});
diff --git a/assets/js/post.min.js b/assets/js/post.min.js
index c85f452..3bcd2d4 100644
--- a/assets/js/post.min.js
+++ b/assets/js/post.min.js
@@ -15,3 +15,5 @@ layout: compress
 {% include_relative _utils/toc-filter.js %}
 
 {% include_relative _utils/img-hyperlink.js %}
+
+{% include_relative _utils/lang-badge.js %}