当前位置: 首页 > news >正文

个人的 minimal-mistakes 配置记录

记录一下个人的 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 iOStextarea.style.fontSize = '12pt';// Reset box modeltextarea.style.border = '0';textarea.style.padding = '0';textarea.style.margin = '0';// Move element out of screen horizontallytextarea.style.position = 'absolute';textarea.style[isRTL ? 'right' : 'left'] = '-9999px';// Move element to the same position verticallylet 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> elementlet 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> elementconst 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 上不知道为什么看不到

不想研究了


http://www.mrgr.cn/news/18126.html

相关文章:

  • .gitignore 修改问题
  • ClimODE——使用神经网络ODE 进行天气预报
  • 零售商商品规划新纪元:全面策略融合与智能计划系统引领未来
  • OceanBase block_file与log过大 的问题
  • tiny_qemu模拟qemu虚拟化原理
  • 基于五种机器学习的某游戏数据分析与胜负预测系统设计与实现,采用Django+MySQL+HTML+CSS实现
  • 大屏自适应解决方案(手写js)
  • [LitCTF 2023]Http pro max plus
  • 使用docker容器部署考试系统
  • 公司注册资本金验资出具验资报告的看法
  • x264 编码器 AArch64汇编系列:quant 量化相关汇编函数
  • 汽车功能安全--TC3xx SMU之看门狗alarm处理
  • 2024“时光Classic演唱会”宜春站启动,李健杨宗纬吴克群唱响秋日浪漫
  • 2024精选骨传导耳机无广测评:南卡、韶音还是墨觉更值得选择?
  • 产品需求过程管理重要性
  • UNION和UNION ALL的区别
  • 文件加密软件怎么选呢?五款人气超高的文件加密软件推荐给你
  • 动态法实现顺序表(C/C++)
  • js处理echarts tooltip定时轮播
  • springsecurity快速入门