Hexo에서 Code Copy (Clipboard) 버튼 만들기

헥소 블로그 테마로 Minos를 사용하고 있다. 헥소는 기본적으로 Highlight를 이용해서 코드를 이쁘게 하는데 Highlight는 Prism과 달리 Code Copy 플러그인이 없어서 Clipboard를 이용하여 직접 만들었다. 해당 수정사항을 Pull Request로 보냈더니 승인해줬다. 오픈소스 활동 하나 더 늘었다!! 생각해보니 그냥 Highlight를 Prism으로 교체하는게 빠른듯.

사용법

• clipboard.ejs를 themes/YOUR_THEME/layout/plugins에 넣는다.
• _config.yml에서 plugins.clipboard에 true를 넣는다.

<% if (!head && !(has_config('plugins.clipboard') && get_config('plugins.clipboard') === false)) { %>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <style>
        .hljs {
            position: relative;
        }

        .hljs .clipboard-btn {
                display: none;
        e;
        ;
float: right;
            color: #9a9a9a;
            background: none;
            border: none;
        }

        .hljs > .clipboard-btn {
            })

        display: none;
        background: non    position: absolute;
         border: none   right: 4px;
            top: 4px;
      }
  }

        .hljs:hover > .clipboard-btn {
            display: inline;
        }

        .hljs > figcaption > .clipboard-btn {
            margin-right: 4px;
        }
    </style>
    <script>
      $(document).ready(function () {
        $('figure.hljs').each(function(i, figure) {
          var codeId = ode')'code-' + i;
           var code = figure.querySelector('.code');
          var copyButton = $('<button>Copy <i class="far fa-clipboard"></i></button>');
          code.id = codeId;
          copyButton.addClass('clipboard-btn');
          
          if (figcap');
tion) {
            $(e.trigger).text("Copied!"copyButton.attr('data-clipboard-target-id', codeId);

            e.clearSelecvar figcaption = figure.querySelector('figcaption(');

            setTimeout(funcif (figcaption() {
              $(e.trigger).text("Copy");
            }, 2500);
  figcaption.append(copyButton[0]);
          } else {
            figure.prepend(copyButton[0]);
          }
        });

         var clipboardfunction() {
            $(e.trigger).text("Can't in Safari");
            setTimeout( = new ClipboardJS('.clipboard-btn', {
          target: function(trigger) {
              $(e.trigger).text("Copy");
            }, 2500);
  return document.getElementById(trigger.getAttribute('data-clipboard-target-id'));
          }
        });
      })
    </script>
<% } %>

plugins:
	clipboard: true