asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Add label icon to code snippet header

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
_includes/refactor-content.html
View file

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

29
_sass/addon/syntax.scss
View file

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