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/toc-filter.js %}
|
||||||
|
|
||||||
{% include_relative _utils/img-hyperlink.js %}
|
{% include_relative _utils/img-hyperlink.js %}
|
||||||
|
|
||||||
|
{% include_relative _utils/lang-badge.js %}
|
||||||
|
|
Loading…
Reference in a new issue