Feature: display the language of code snippets

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;
+  }
+}

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}`);
+      }
+    });
+
+  });
+});

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 %}