Add label icon to code snippet header

This commit is contained in:
Cotes Chung 2021-09-22 18:25:46 +08:00
parent 89b76dc2a0
commit 4ad0a76789
2 changed files with 33 additions and 16 deletions

View file

@ -119,14 +119,20 @@
{% if _left contains 'file="' %}
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
{% assign _label_icon = 'far fa-file' %}
{% else %}
{% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
{% assign _label_icon = 'fas fa-code small' %}
{% endif %}
{% capture _label %}
<span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
{% endcapture %}
{% assign _new_content = _new_content | append: _snippet
| append: '<div class="code-header" text-data="'
| append: _text
| append: '"><button aria-label="copy" data-original-title="'
| append: '<div class="code-header">'
| append: _label
| append: '<button aria-label="copy" data-original-title="'
| append: site.data.locales[lang].post.button.copy_code.succeed
| append: '"><i class="far fa-clone"></i></button></div>'
| append: '<div class="highlight"><code>'

View file

@ -172,24 +172,33 @@ div {
align-items: center;
line-height: 1.85rem;
// text data
&::before {
content: attr(text-data);
// the label
span {
color: var(--lang-badge-color);
padding-left: 1em;
padding-left: 0.6rem;
font-size: 0.85rem;
// language
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
&:after {
content: attr(text-data);
margin-left: 0.3rem;
font-weight: 600;
// file name
@at-root [file] #{&} {
font-size: 0.85rem;
text-transform: none;
// language
@at-root .highlighter-rouge:not([file]) #{&} {
font-size: 0.75rem;
text-transform: uppercase;
}
} // :after
@at-root [file] #{&} > i { // center the file icon
position: relative;
top: 1px;
}
}
// clipboard
button {
border: 1px solid var(--code-header-bg);
@ -208,7 +217,9 @@ div {
&:not([timeout]):hover {
background-color: gray;
color: white;
> i {
color: white;
}
}
&:focus {