代码好看字体颜色(个人博客美化1之全局字体与代码高亮)
代码好看字体颜色(个人博客美化1之全局字体与代码高亮)PS:有些字体英文辨识度比较模糊,你可以放置两个字体,英文在前面,中文在后面。效果如下:ps:操作对象为hugo博客,理论静态博客或者H5都能使用。先把字体改下,找到css或者新建个custom.css把下面代码扔进去。@import url('https://fonts.googleapis.com/css2?family=ZCOOL KuaiLe&display=swap'); *{font-family: 'ZCOOL KuaiLe' cursive;} 字体再这里找:https://fonts.google.com/
一、前因攻破技术难点时,总会随机进入到别人的网站中,有时看到别人的博客那叫一个养眼悦目,心里难免有点小波澜。
虽然知道它要么买的,要么用的动态博客,但没人家美就没人家美,咱不能失了风度。
再者,自己网站当初也是过五关斩六将,选框架选主题才把它孵化出来的,不至于就不爱了。
因此呢,为了解决内心的小波澜,稍微加点css,js美化一下,还是能做到的。
ps:操作对象为hugo博客,理论静态博客或者H5都能使用。
二、全局字体先把字体改下,找到css或者新建个custom.css把下面代码扔进去。
@import url('https://fonts.googleapis.com/css2?family=ZCOOL KuaiLe&display=swap');
*{font-family: 'ZCOOL KuaiLe' cursive;}
字体再这里找:https://fonts.google.com/
效果如下:
PS:有些字体英文辨识度比较模糊,你可以放置两个字体,英文在前面,中文在后面。
@import url('https://fonts.googleapis.com/css2?family=ZCOOL KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kadwa&display=swap');
*{font-family: 'Kadwa' 'ZCOOL KuaiLe';}
三、代码块高亮
hugo配置文件config.toml中甩入下列代码
[markup]
[markup.highlight]
anchorLineNos = false
codeFences = true
guessSyntax = true
hl_Lines = ''
lineAnchors = ''
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = 'murphy'
tabWidth = 4
解释几个常用的:
guessSyntax:猜测语法,针对代码块没有写语言的
lineNos:是否显示行号
style:高亮样式,从在里找 https://xyproto.github.io/splash/docs/all.html
如果你的主题集成了highlightjs,可以使用它,不过你得把上面的注释掉,免得互相渲染了。
config.toml中加入下列代码
highlightjs = true
highlightjsCDN = "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"
highlightjsExtraLanguages = ["ocaml"]
highlightjsTheme = "gradient-light"
highlightjsThemeDark = "paraiso-dark"
主题在这里找: https://highlightjs.org/static/demo/
效果如下:
四、代码块一键复制新建css或者放入已有的css中
/*start copy-to-clipboard */
.highlight {
position: relative;
}
.highlight pre {
padding-right: 75px;
background-color:#f8f8f8 !important;
}
.highlight-copy-btn {
position: absolute;
top: 7px;
right: 7px;
border: 0;
border-radius: 4px;
padding: 1px;
font-size: 0.8em;
line-height: 1.8;
color: #fff;
background-color: #777;
min-width: 55px;
text-align: center;
}
.highlight-copy-btn:hover {
background-color: #666;
}
/*end copy-to-clipboard */
新建js或者放入已有js中
// start copy-to-clipboard
(function() {
'use strict';
if(!document.queryCommandSupported('copy')) {
return;
}
function flashCopyMessage(el msg) {
el.textContent = msg;
setTimeout(function() {
el.textContent = "Copy";
} 1000);
}
function selectText(node) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
return selection;
}
function addCopyButton(containerEl) {
var copyBtn = document.createElement("button");
copyBtn.className = "highlight-copy-btn";
copyBtn.textContent = "Copy";
var codeEl = containerEl.firstElementChild;
copyBtn.addEventListener('click' function() {
try {
var selection = selectText(codeEl);
document.execCommand('copy');
selection.removeAllRanges();
flashCopyMessage(copyBtn 'Copied!')
} catch(e) {
console && console.log(e);
flashCopyMessage(copyBtn 'Failed :\'(')
}
});
containerEl.appendChild(copyBtn);
}
// Add copy button to code blocks
var highlightBlocks = document.getElementsByClassName('highlight');
Array.prototype.forEach.call(highlightBlocks addCopyButton);
})();
//end copy-to-clipboard
加入config.toml配置文件中
[params.advanced]
customCSS = ["css/custom.css"]
customJS = ["js/custom.js"]
效果:
五、总结前端的玩意太多了,互相替换的也多,我也不太喜欢侵入式强的框架,只能慢慢整了,先完成再完美。
收工。