Feature: display the language of code snippets

This commit is contained in:
Cotes Chung 2020-12-18 20:32:07 +08:00
parent 260a906b11
commit 8e5d8b8931
3 changed files with 39 additions and 0 deletions

View file

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

View file

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

View file

@ -15,3 +15,5 @@ layout: compress
{% include_relative _utils/toc-filter.js %} {% include_relative _utils/toc-filter.js %}
{% include_relative _utils/img-hyperlink.js %} {% include_relative _utils/img-hyperlink.js %}
{% include_relative _utils/lang-badge.js %}