快捷搜索:  汽车  科技

代码好看字体颜色(个人博客美化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/

代码好看字体颜色(个人博客美化1之全局字体与代码高亮)(1)

一、前因

攻破技术难点时,总会随机进入到别人的网站中,有时看到别人的博客那叫一个养眼悦目,心里难免有点小波澜。

虽然知道它要么买的,要么用的动态博客,但没人家美就没人家美,咱不能失了风度。

再者,自己网站当初也是过五关斩六将,选框架选主题才把它孵化出来的,不至于就不爱了。

因此呢,为了解决内心的小波澜,稍微加点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/

效果如下:

代码好看字体颜色(个人博客美化1之全局字体与代码高亮)(2)

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/

效果如下:

代码好看字体颜色(个人博客美化1之全局字体与代码高亮)(3)

四、代码块一键复制

新建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"]

效果:

代码好看字体颜色(个人博客美化1之全局字体与代码高亮)(4)

五、总结

前端的玩意太多了,互相替换的也多,我也不太喜欢侵入式强的框架,只能慢慢整了,先完成再完美。

收工。

猜您喜欢: