fix(layout): code block caption bar on safari
This commit is contained in:
parent
7b88a415d7
commit
bf3b49a04b
|
@ -394,14 +394,11 @@ figure.highlight
|
||||||
background: rgba(200, 200, 200, 0.15)
|
background: rgba(200, 200, 200, 0.15)
|
||||||
|
|
||||||
figcaption
|
figcaption
|
||||||
|
margin: 0 !important
|
||||||
padding: .3em .75em
|
padding: .3em .75em
|
||||||
text-align: left
|
text-align: left
|
||||||
font-style: normal
|
font-style: normal
|
||||||
font-size: .8em
|
font-size: .8em
|
||||||
&:after
|
|
||||||
clear: both
|
|
||||||
content: " "
|
|
||||||
display: table
|
|
||||||
|
|
||||||
span
|
span
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
|
@ -412,7 +409,6 @@ figure.highlight
|
||||||
color: #9a9a9a
|
color: #9a9a9a
|
||||||
|
|
||||||
a
|
a
|
||||||
float: right
|
|
||||||
margin-left: 0.5em
|
margin-left: 0.5em
|
||||||
|
|
||||||
.fold
|
.fold
|
||||||
|
|
|
@ -46,52 +46,62 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (typeof (ClipboardJS) !== 'undefined' && IcarusThemeSettings.article.highlight.clipboard) {
|
|
||||||
|
var clipboard = IcarusThemeSettings.article.highlight.clipboard;
|
||||||
|
var fold = IcarusThemeSettings.article.highlight.fold;
|
||||||
|
fold = fold.trim();
|
||||||
|
|
||||||
|
$('figure.highlight').each(function () {
|
||||||
|
if ($(this).find('figcaption').length) {
|
||||||
|
$(this).find('figcaption').addClass('level');
|
||||||
|
$(this).find('figcaption').append('<div class="level-left">');
|
||||||
|
$(this).find('figcaption').append('<div class="level-right">');
|
||||||
|
$(this).find('figcaption div.level-left').append($(this).find('figcaption').find('span'));
|
||||||
|
$(this).find('figcaption div.level-right').append($(this).find('figcaption').find('a'));
|
||||||
|
} else {
|
||||||
|
if (clipboard || fold) {
|
||||||
|
$(this).prepend('<figcaption class="level"><div class="level-left"></div><div class="level-right"></div></figcaption>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (typeof (ClipboardJS) !== 'undefined' && clipboard) {
|
||||||
$('figure.highlight').each(function () {
|
$('figure.highlight').each(function () {
|
||||||
var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
|
var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
|
||||||
var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
|
var button = '<a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#' + id + ' .code"><i class="fas fa-copy"></i></a>';
|
||||||
$(this).attr('id', id);
|
$(this).attr('id', id);
|
||||||
if ($(this).find('figcaption').length) {
|
$(this).find('figcaption div.level-right').append(button);
|
||||||
$(this).find('figcaption').prepend(button);
|
|
||||||
} else {
|
|
||||||
$(this).prepend('<figcaption>' + button + '</figcaption>');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
new ClipboardJS('.highlight .copy');
|
new ClipboardJS('.highlight .copy');
|
||||||
}
|
}
|
||||||
var fold = IcarusThemeSettings.article.highlight.fold;
|
|
||||||
if (fold.trim()) {
|
if (fold) {
|
||||||
var button = '<span class="fold">' + (fold === 'unfolded' ? '<i class="fas fa-angle-down"></i>' : '<i class="fas fa-angle-right"></i>') + '</span>';
|
var button = '<span class="fold">' + (fold === 'unfolded' ? '<i class="fas fa-angle-down"></i>' : '<i class="fas fa-angle-right"></i>') + '</span>';
|
||||||
$('figure.highlight').each(function () {
|
$('figure.highlight').each(function () {
|
||||||
if ($(this).find('figcaption').length) {
|
// 此处find ">folded" span,如果有自定义code头,并且">folded"进行处理
|
||||||
|
// 使用示例,.md 文件中头行标记">folded"
|
||||||
|
// ```java main.java >folded
|
||||||
|
// import main.java
|
||||||
|
// private static void main(){
|
||||||
|
// // test
|
||||||
|
// int i = 0;
|
||||||
|
// return i;
|
||||||
|
// }
|
||||||
|
// ```
|
||||||
|
if ($(this).find('figcaption').find('span').length > 0) {
|
||||||
|
let spanArr = $(this).find('figcaption').find('span');
|
||||||
|
if (spanArr[0].innerText.indexOf(">folded") > -1) {
|
||||||
|
// 去掉folded
|
||||||
|
spanArr[0].innerText = spanArr[0].innerText.replace(">folded", "")
|
||||||
|
button = '<span class="fold"><i class="fas fa-angle-right"></i></span>';
|
||||||
|
$(this).find('figcaption div.level-left').prepend(button);
|
||||||
|
|
||||||
// 此处find ">folded" span,如果有自定义code头,并且">folded"进行处理
|
// 收叠代码块
|
||||||
// 使用示例,.md 文件中头行标记">folded"
|
toggleFold(this, true);
|
||||||
// ```java main.java >folded
|
return;
|
||||||
// import main.java
|
|
||||||
// private static void main(){
|
|
||||||
// // test
|
|
||||||
// int i = 0;
|
|
||||||
// return i;
|
|
||||||
// }
|
|
||||||
// ```
|
|
||||||
if ($(this).find('figcaption').find('span').length > 0) {
|
|
||||||
let spanArr = $(this).find('figcaption').find('span');
|
|
||||||
if (spanArr[0].innerText.indexOf(">folded") > -1) {
|
|
||||||
// 去掉folded
|
|
||||||
spanArr[0].innerText = spanArr[0].innerText.replace(">folded", "")
|
|
||||||
button = '<span class="fold"><i class="fas fa-angle-right"></i></span>';
|
|
||||||
$(this).find('figcaption').prepend(button);
|
|
||||||
|
|
||||||
// 收叠代码块
|
|
||||||
toggleFold(this, true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
$(this).find('figcaption').prepend(button);
|
|
||||||
} else {
|
|
||||||
$(this).prepend('<figcaption>' + button + '</figcaption>');
|
|
||||||
}
|
}
|
||||||
|
$(this).find('figcaption div.level-left').prepend(button);
|
||||||
toggleFold(this, fold === 'folded');
|
toggleFold(this, fold === 'folded');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue