记录一下个人的 minimal-mistakes 配置
Modifty
Change font size
assets\css\main.scss
html {
font-size: 12px; // change to whatever
@include breakpoint($medium) {
font-size: 14px; // change to whatever
}
@include breakpoint($large) {
font-size: 16px; // change to whatever
}
@include breakpoint($x-large) {
font-size: 18px; // change to whatever
}
}
Delete right padding of post
assets\css\main.scss
.page {
@include breakpoint($large) {
padding-right: 0;
}
@include breakpoint($x-large) {
padding-right: 0;
}
}
Add line number to code chunk
_config.yml
# Markdown Processing
kramdown:
...
syntax_highlighter_opts:
block:
line_numbers: true
Add copy button to code chunk
Refer to https://github.com/iBug/iBug-source/commit/eb0180ae9eaa2d3d90c25b9c49cfb0e82fcc5e84
_includes/head.html
<script src="/assets/js/clipboard.js" async defer></script>
_sass\minimal-mistakes\_page.scss
pre {
.copy-button {
position: absolute;
top: 0.5em;
right: 0.5em;
z-index: 1;
background: none;
border: none;
border-radius: 0.1em;
padding: 0.2em 0.5em;
color: white;
opacity: 0.1;
transition: color 0.25s linear, opacity 0.25s linear;
&:hover {
opacity: 1;
}
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
}
&:hover .copy-button {
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
assets/js/clipboard.js
$(document).ready(function() {
const copyText = function(text) {
const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
var textarea = document.createElement('textarea');
// Prevent zooming on iOS
textarea.style.fontSize = '12pt';
// Reset box model
textarea.style.border = '0';
textarea.style.padding = '0';
textarea.style.margin = '0';
// Move element out of screen horizontally
textarea.style.position = 'absolute';
textarea.style[isRTL ? 'right' : 'left'] = '-9999px';
// Move element to the same position vertically
let yPosition = window.pageYOffset || document.documentElement.scrollTop;
textarea.style.top = yPosition + "px";
textarea.setAttribute('readonly', '');
textarea.value = text;
document.body.appendChild(textarea);
let success = true;
try {
textarea.select();
success = document.execCommand("copy");
} catch {
success = false;
}
textarea.parentNode.removeChild(textarea);
return success;
};
const copyButtonEventListener = function(event) {
const thisButton = event.target;
// Locate the <code> element
let codeBlock = thisButton.nextElementSibling;
while (codeBlock && codeBlock.tagName.toLowerCase() !== 'code') {
codeBlock = codeBlock.nextElementSibling;
}
if (!codeBlock) {
// No <code> found - wtf?
throw new Error("No code block found beside this button. This is unexpected.");
}
return copyText(codeBlock.innerText);
};
$(".page__content pre > code").each(function() {
// Locate the <pre> element
const container = $(this).parent();
var copyButton = document.createElement("button");
copyButton.title = "Copy to clipboard";
copyButton.className = "copy-button";
copyButton.innerHTML = '<i class="far fa-copy"></i>';
copyButton.addEventListener("click", copyButtonEventListener);
container.prepend(copyButton);
});
});
Disable scroll bar in code block
_sass\minimal-mistakes\_page.scss
::-webkit-scrollbar {
display: none;
}
最终这个也不想用了……在本地构建就可以看到复制按钮,但是 github pages 上不知道为什么看不到
不想研究了