Feature: display the language of code snippets
This commit is contained in:
parent
260a906b11
commit
8e5d8b8931
3 changed files with 39 additions and 0 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
20
assets/js/_utils/lang-badge.js
Normal file
20
assets/js/_utils/lang-badge.js
Normal 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}`);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
2
assets/js/post.min.js
vendored
2
assets/js/post.min.js
vendored
|
@ -15,3 +15,5 @@ layout: compress
|
|||
{% include_relative _utils/toc-filter.js %}
|
||||
|
||||
{% include_relative _utils/img-hyperlink.js %}
|
||||
|
||||
{% include_relative _utils/lang-badge.js %}
|
||||
|
|
Loading…
Reference in a new issue