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

Add clipboard button to code block

Browse source
This commit is contained in:
Cotes Chung 2021-09-09 22:09:07 +08:00
parent 7dc7a7efc8
commit 2537283beb
2 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_includes/refactor-content.html
View file

@ -102,7 +102,7 @@
{% endif %} {% endif %}
<!-- Add lang-badge for code snippets --> <!-- Add header for code snippets -->
{% if _content contains '<div class="language-' %} {% if _content contains '<div class="language-' %}
{% assign _code_splits = _content | split: '<div class="language-' %} {% assign _code_splits = _content | split: '<div class="language-' %}
@ -116,7 +116,7 @@
{% capture _tag_head %}<div class="language-{% endcapture %} {% capture _tag_head %}<div class="language-{% endcapture %}
{% assign _replacement = '-rouge"><div class="code-header" data-lang="' {% assign _replacement = '-rouge"><div class="code-header" data-lang="'
| append: _lang | append: _lang
| append: '"></div><div class="highlight">' | append: '"><button><i class="fa-fw far fa-clipboard"></i></button></div><div class="highlight">'
%} %}
{% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %} {% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
{% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %} {% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}

33
_sass/addon/syntax.scss
View file

@ -166,6 +166,10 @@ div {
background: var(--code-header-bg); background: var(--code-header-bg);
border-top-left-radius: $code-radius; border-top-left-radius: $code-radius;
border-top-right-radius: $code-radius; border-top-right-radius: $code-radius;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 1.85rem;
// language badge // language badge
&::before { &::before {
@ -176,6 +180,29 @@ div {
text-transform: uppercase; text-transform: uppercase;
padding-left: 1em; padding-left: 1em;
} }
// clipboard
button {
border: 0;
background-color: inherit;
border-top-right-radius: $code-radius;
color: var(--highlight-lineno-color);
&:hover {
background-color: gray;
color: white;
}
&:focus {
outline: none;
}
i {
font-size: 85%;
}
}
} }
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
@ -187,7 +214,11 @@ div {
.code-header { .code-header {
border-radius: 0; border-radius: 0;
padding: 0 0.4rem; padding-left: 0.4rem;
button {
border-top-right-radius: 0;
}
} }
} }
} }