code block title, symbole line number support

This commit is contained in:
zzossig 2020-02-09 18:10:12 +09:00
parent 8f9b3f0dde
commit 5b5be5dc89
6 changed files with 100 additions and 31 deletions

View File

@ -74,6 +74,9 @@
opacity: 1;
height: auto;
cursor: pointer;
@include flexbox();
@include justify-content(center);
&__desc {
position: absolute;

View File

@ -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);
}
}

View File

@ -14,6 +14,7 @@
{{ partial "body/toc" . }}
{{ .Content }}
</article>
{{ partial "script/codeblock-script" . }}
{{ partial "body/share" . }}
{{ partial "body/donation" . }}
{{ partial "body/whoami" . }}

View File

@ -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>

View File

@ -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;
// =================================================================