code block title, symbole line number support
This commit is contained in:
parent
8f9b3f0dde
commit
5b5be5dc89
|
@ -74,6 +74,9 @@
|
|||
opacity: 1;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
|
||||
@include flexbox();
|
||||
@include justify-content(center);
|
||||
|
||||
&__desc {
|
||||
position: absolute;
|
||||
|
|
|
@ -17,7 +17,7 @@ $grid_max: $grid_max_width + $grid_max_unit;
|
|||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: calc((100vw - 980px) / 2);
|
||||
width: calc((100vw - #{$grid_max}) / 2);
|
||||
}
|
||||
|
||||
&__right {
|
||||
|
@ -25,6 +25,6 @@ $grid_max: $grid_max_width + $grid_max_unit;
|
|||
top: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
width: calc((100vw - 980px) / 2);
|
||||
width: calc((100vw - #{$grid_max}) / 2);
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
|
@ -14,6 +14,7 @@
|
|||
{{ partial "body/toc" . }}
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ partial "script/codeblock-script" . }}
|
||||
{{ partial "body/share" . }}
|
||||
{{ partial "body/donation" . }}
|
||||
{{ partial "body/whoami" . }}
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
<script>
|
||||
'use strict';
|
||||
// ====================== markdown code block ======================
|
||||
function wrap(el, wrapper) {
|
||||
el.parentNode.insertBefore(wrapper, el);
|
||||
wrapper.appendChild(el);
|
||||
}
|
||||
|
||||
(function () {
|
||||
var singleContentsElem = document.querySelector('.single__contents');
|
||||
singleContentsElem ?
|
||||
singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
|
||||
var dataLang = elem.getAttribute('data-lang');
|
||||
var dataLangWrapper = document.createElement('div');
|
||||
var code = null;
|
||||
var codeTitle = null;
|
||||
|
||||
if (dataLang && dataLang.includes(':')) {
|
||||
code = dataLang.split(':')[0];
|
||||
codeTitle = dataLang.split(':')[1];
|
||||
|
||||
dataLangWrapper.className = 'language-' + code;
|
||||
dataLangWrapper.setAttribute('data-lang', codeTitle);
|
||||
|
||||
elem.className = 'language-' + code;
|
||||
elem.setAttribute('data-lang', codeTitle);
|
||||
elem.setAttribute('id', codeTitle);
|
||||
} else if (!dataLang) {
|
||||
dataLangWrapper.setAttribute('data-lang', 'Code');
|
||||
dataLangWrapper.className = 'language-code';
|
||||
}
|
||||
|
||||
if (!dataLang || codeTitle) {
|
||||
wrap(elem.parentNode, dataLangWrapper);
|
||||
}
|
||||
|
||||
}) : null;
|
||||
})();
|
||||
|
||||
var langCodeElem = document.querySelectorAll('.language-code');
|
||||
langCodeElem ? langCodeElem.forEach(function (elem) {
|
||||
var newElem = document.createElement('span');
|
||||
newElem.className = 'copy-to-clipboard';
|
||||
newElem.setAttribute('title', 'Copy to clipboard');
|
||||
elem.append(newElem);
|
||||
}) : null;
|
||||
// =================================================================
|
||||
</script>
|
|
@ -90,34 +90,6 @@
|
|||
var navbar = document.querySelector('.navbar');
|
||||
var singleContentsElem = document.querySelector('.single__contents');
|
||||
|
||||
// ====================== markdown code block ======================
|
||||
function wrap(el, wrapper) {
|
||||
el.parentNode.insertBefore(wrapper, el);
|
||||
wrapper.appendChild(el);
|
||||
}
|
||||
|
||||
(function () {
|
||||
singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
|
||||
var dataLang = elem.getAttribute('data-lang');
|
||||
if (!dataLang) {
|
||||
var dataLangWrapper = document.createElement('div');
|
||||
dataLangWrapper.setAttribute('data-lang', 'Code');
|
||||
dataLangWrapper.className = 'language-code';
|
||||
wrap(elem.parentNode, dataLangWrapper);
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
var langCodeElem = document.querySelectorAll('.language-code');
|
||||
langCodeElem ? langCodeElem.forEach(function (elem) {
|
||||
var newElem = document.createElement('span');
|
||||
newElem.className = 'copy-to-clipboard';
|
||||
newElem.setAttribute('title', 'Copy to clipboard');
|
||||
elem.append(newElem);
|
||||
}) : null;
|
||||
// =================================================================
|
||||
|
||||
|
||||
// ======================= busuanzi counter ========================
|
||||
{{ $enableBusuanzi := .Site.Params.enableBusuanzi }}
|
||||
{{ $busuanziPagePV := .Site.Params.busuanziPagePV }}
|
||||
|
@ -338,6 +310,9 @@
|
|||
var clipInit = false;
|
||||
var preChromaElem = document.querySelectorAll('pre.chroma');
|
||||
var langCodeElem = document.querySelectorAll('.language-code');
|
||||
var dolorCodeElem = document.querySelectorAll('div.language-\\$');
|
||||
var gtCodeElem = document.querySelectorAll('div.language-\\>');
|
||||
|
||||
var makeClipboard = function(elem) {
|
||||
var code = elem,
|
||||
text = elem.textContent;
|
||||
|
@ -398,6 +373,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
var makeSymbolClipboard = function(elem) {
|
||||
var clipboardSpan = document.createElement('span');
|
||||
clipboardSpan.setAttribute('class', 'copy-to-clipboard');
|
||||
clipboardSpan.setAttribute('title', 'Copy to clipboard');
|
||||
elem.parentNode.parentNode.insertBefore(clipboardSpan, elem.parentNode.nextElementSibling);
|
||||
}
|
||||
|
||||
preChromaElem ?
|
||||
preChromaElem.forEach(function(elem) {
|
||||
elem.querySelectorAll('code').forEach(function(codeElem) {
|
||||
|
@ -411,6 +393,41 @@
|
|||
makeClipboard(codeElem);
|
||||
});
|
||||
}) : null;
|
||||
|
||||
dolorCodeElem ?
|
||||
dolorCodeElem.forEach(function(elem) {
|
||||
elem.querySelectorAll('code').forEach(function (codeElem) {
|
||||
makeSymbolClipboard(codeElem);
|
||||
});
|
||||
}) : null;
|
||||
|
||||
gtCodeElem ?
|
||||
gtCodeElem.forEach(function(elem) {
|
||||
elem.querySelectorAll('code').forEach(function (codeElem) {
|
||||
makeSymbolClipboard(codeElem);
|
||||
});
|
||||
}) : null;
|
||||
// =================================================================
|
||||
|
||||
|
||||
// ================ codeblock line number to symbol ================
|
||||
dolorCodeElem ?
|
||||
dolorCodeElem.forEach(function(elem) {
|
||||
var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
|
||||
lnts ?
|
||||
lnts.forEach(function(lnt) {
|
||||
lnt.innerHTML = '$<br/>';
|
||||
}) : null;
|
||||
}) : null;
|
||||
|
||||
gtCodeElem ?
|
||||
gtCodeElem.forEach(function(elem) {
|
||||
var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
|
||||
lnts ?
|
||||
lnts.forEach(function(lnt) {
|
||||
lnt.innerHTML = '><br/>';
|
||||
}) : null;
|
||||
}) : null;
|
||||
// =================================================================
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue