个人的 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 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 上不知道为什么看不到

不想研究了