Skip to content

Commit 42f24a7

Browse files
cotes2020cotes2020
committed
Merge branch 'feature/copy-snippet' (resolve cotes2020#396, close cotes2020#400)
2 parents f184f73 + 94e95f9 commit 42f24a7

11 files changed

Lines changed: 132 additions & 76 deletions

File tree

‎_includes/js-selector.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
{% if page.layout == 'post' or page.layout == 'page' %}
1616
<!-- image lazy-loading & popup -->
17-
<script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>
17+
<script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
1818
{% endif %}
1919

2020
{% if page.layout == 'home'

‎_includes/refactor-content.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102

103103
{% endif %}
104104

105-
<!-- Add lang-badge for code snippets -->
105+
<!-- Add header for code snippets -->
106106

107107
{% if _content contains '<div class="language-' %}
108108
{% assign _code_splits = _content | split: '<div class="language-' %}
@@ -113,8 +113,13 @@
113113
{% assign _new_content = _snippet %}
114114
{% else %}
115115
{% assign _lang = _snippet | split: ' ' | first %}
116-
{% capture _tag_head %}<div lang="{{_lang}}" class="language-{% endcapture %}
117-
{% assign _new_content = _new_content | append: _tag_head | append: _snippet %}
116+
{% capture _tag_head %}<div class="language-{% endcapture %}
117+
{% assign _replacement = '-rouge"><div class="code-header" data-lang="'
118+
| append: _lang
119+
| append: '"><button><i class="fa-fw far fa-clipboard"></i></button></div><div class="highlight">'
120+
%}
121+
{% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
122+
{% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}
118123
{% endif %}
119124
{% endfor %}
120125

‎_javascript/utils/clipboard.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
* Initial the clipboard.js object, see: <https://github.com/zenorocha/clipboard.js>
3+
*
4+
* Dependencies:
5+
* - popper.js (https://github.com/popperjs/popper-core)
6+
* - clipboard.js (https://github.com/zenorocha/clipboard.js)
7+
*/
8+
$(function() {
9+
const btnSelector = '.code-header>button';
10+
11+
var clipboard = new ClipboardJS(btnSelector, {
12+
target(trigger) {
13+
return trigger.parentNode.nextElementSibling;
14+
}
15+
});
16+
17+
function setTooltip(btn, msg) {
18+
$(btn).tooltip('hide')
19+
.attr('data-original-title', msg)
20+
.tooltip('show');
21+
}
22+
23+
function hideTooltip(btn) {
24+
setTimeout(function() {
25+
$(btn).tooltip('hide');
26+
}, 1000);
27+
}
28+
29+
$(btnSelector).tooltip({
30+
trigger: 'click',
31+
placement: 'left'
32+
});
33+
34+
clipboard.on('success', function(e) {
35+
e.clearSelection();
36+
setTooltip(e.trigger, 'Copied!');
37+
hideTooltip(e.trigger);
38+
});
39+
40+
});

‎_javascript/utils/copy-link.js‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎_sass/addon/syntax.scss‎

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,18 @@ html[mode=dark] {
2727

2828
/* -- Codes Snippet -- */
2929

30+
$code-radius: 6px;
31+
3032
%code-snippet-bg {
3133
background: var(--highlight-bg-color);
3234
}
3335

3436
%code-snippet-radius {
35-
border-radius: 6px;
37+
border-radius: $code-radius;
3638
}
3739

3840
%code-snippet-padding {
39-
padding: 1.5rem;
41+
padding: 1.2rem;
4042
}
4143

4244
div > pre {
@@ -86,12 +88,10 @@ div > pre {
8688
}
8789

8890
.lineno {
89-
margin-left: 0.2rem;
9091
padding-right: 0.5rem;
9192
min-width: 2.2rem;
9293
text-align: right;
9394
color: var(--highlight-lineno-color);
94-
border-right: 1px solid var(--highlight-lineno-border-color);
9595
-webkit-user-select: none;
9696
-khtml-user-select: none;
9797
-moz-user-select: none;
@@ -135,7 +135,7 @@ code {
135135
}
136136

137137
td.rouge-code {
138-
padding: 1.5rem 1.5rem 1.5rem 1rem;
138+
padding: 1.2rem 1.5rem 1.2rem 1rem;
139139

140140
// Prevent some browser extends from
141141
// changing the URL string of code block.
@@ -162,25 +162,64 @@ div {
162162
}
163163
}
164164

165-
div[class^='language-']::before {
166-
content: attr(lang);
167-
position: absolute;
168-
right: 2rem;
169-
margin-top: 3px;
170-
font-size: 0.7rem;
171-
font-weight: 600;
172-
color: var(--highlight-lineno-color);
173-
text-transform: uppercase;
174-
}
165+
.code-header {
166+
background: var(--code-header-bg);
167+
border-top-left-radius: $code-radius;
168+
border-top-right-radius: $code-radius;
169+
display: flex;
170+
justify-content: space-between;
171+
align-items: center;
172+
line-height: 1.85rem;
173+
174+
// language badge
175+
&::before {
176+
content: attr(data-lang);
177+
color: var(--lang-badge-color);
178+
font-size: 0.75rem;
179+
font-weight: 600;
180+
text-transform: uppercase;
181+
padding-left: 1em;
182+
}
183+
184+
// clipboard
185+
button {
186+
border: 0;
187+
background-color: inherit;
188+
border-top-right-radius: $code-radius;
189+
color: var(--highlight-lineno-color);
190+
191+
&:hover {
192+
background-color: gray;
193+
color: white;
194+
}
195+
196+
&:focus {
197+
outline: none;
198+
}
199+
200+
i {
201+
font-size: 85%;
202+
}
175203

176-
@media (min-width: 768px) {
177-
div[class^='language-']::before {
178-
right: 3.1rem;
179204
}
205+
180206
}
181207

182-
@media (min-width: 1650px) {
183-
div[class^='language-']::before {
184-
right: 3.5rem;
208+
@media all and (max-width: 576px) {
209+
.post-content {
210+
> div[class^='language-'] {
211+
@include ml-mr(-1.25rem);
212+
213+
border-radius: 0;
214+
215+
.code-header {
216+
border-radius: 0;
217+
padding-left: 0.4rem;
218+
219+
button {
220+
border-top-right-radius: 0;
221+
}
222+
}
223+
}
185224
}
186225
}

‎_sass/colors/dark-syntax.scss‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,6 @@
33
*/
44

55
@mixin dark-syntax {
6-
/* ----- My styles ------ */
7-
--highlight-bg-color: #252525;
8-
--highlighter-rouge-color: #de6b18;
9-
--highlight-lineno-color: #6c6c6d;
10-
--highlight-lineno-border-color: #303435;
11-
--inline-code-bg: #272822;
12-
13-
.highlight {
14-
.gp { color: #818c96; }
15-
}
16-
17-
pre { color: #bfbfbf; } /* override Bootstrap */
18-
kbd { background-color: black; }
19-
206
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
217
.highlight pre { background-color: var(--highlight-bg-color); }
228
.highlight .hll { background-color: var(--highlight-bg-color); }
@@ -81,4 +67,20 @@
8167
.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
8268
.highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
8369
.highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
70+
71+
/* ----- custom styles ------ */
72+
73+
--highlight-bg-color: #252525;
74+
--highlighter-rouge-color: #de6b18;
75+
--highlight-lineno-color: #6c6c6d;
76+
--inline-code-bg: #272822;
77+
--code-header-bg: #353535;
78+
--lang-badge-color: #6c6c6d;
79+
80+
.highlight {
81+
.gp { color: #818c96; }
82+
}
83+
84+
pre { color: #bfbfbf; } /* override Bootstrap */
85+
kbd { background-color: black; }
8486
}

‎_sass/colors/light-syntax.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@
7070
--highlight-bg-color: #f7f7f7;
7171
--highlighter-rouge-color: #2f2f2f;
7272
--highlight-lineno-color: #c2c6cc;
73-
--highlight-lineno-border-color: #e9ecef;
7473
--inline-code-bg: #f3f3f3;
74+
--code-header-bg: #eaeaea;
75+
--lang-badge-color: #a4a7ab;
76+
7577
} // light-syntax

‎_sass/layout/post.scss‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -299,16 +299,6 @@
299299
margin-top: 1rem;
300300
}
301301
}
302-
303-
.post-content > div[class^='language-'] {
304-
@include ml-mr(-1.25rem);
305-
306-
border-radius: 0;
307-
&::before { // the lang badge
308-
right: 1rem;
309-
}
310-
}
311-
312302
}
313303

314304
@media all and (max-width: 768px) {

‎assets/js/dist/page.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)