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