프로그래밍을 하다보면 가장 중요한 것이 웹서핑을 통해 내가 필요한 코드 정보들을 찾는 것입니다. 그럴 때 중요한 것이 바로 코드를 복사하고 붙여넣어 테스트를 해보는 것인데, 만약에 코드를 복사하기가 되지 않는다면 필요한 코드를 한땀한땀 타이핑을 해야하는 불상사가 발생합니다. 이런일이 심심치 않게 많이 발생하고 있습니다.
정작 코드를 올리는 저 역시도 코드블럭이 마우스 드래그가 되지 않게 만들어놨으니, 다른 사람들도 제 블로그에서 코드를 쉽게 가져가지 못하고 있다는 이야깁니다. 그래서 마우스 드래그는 못하더라도 바로 복사하기 버튼을 만들어서 타이핑 없이 가져갈 수 있도록 해보겠습니다. 저처럼 티스토리로 코드를 작성하시는 많은 분들이 복사버튼을 만들기를 바라는 마음으로 시작하겠습니다.
1. 가장 중요한 재료 clipboard.min.js 라이브러리 다운로드.
이 라이브러리는 Github에 공개된 자바스트립트 라이브러리입니다.
https://github.com/zenorocha/clipboard.js
먼저 오른쪽 위에 있는 code 버튼을 클릭한 후 하단에 Downloda ZIP을 클릭하여 다운로드 받습니다.
그러면 clipboard-master.zip 파일이 다운로드 될 것입니다.
다운받은 ZIP파일을 해제하면 dist 폴더에 들어있는 clipboard-min.js 파일을 사용하면 됩니다.
2. 티스토리에 라이브러리 적용하기.
다운로드 받은 clipboard-min.js 파일을 사용하기 위해서는 내 티스토리 블로그에 라이브러리 업로드를 해야 합니다.
방법은 어렵지 않습니다. 티스토리를 꾸미기 위해서는 반드시, 그리고 자주 들어갈 수밖에 없는 꾸미기의 스킨편집을 통해 이루어지니 간단하게 진행됩니다.
Tistory 관리페이지의 꾸미기 섹션에서 스킨편집을 클릭한 후 html 편집 버튼을 클릭하면 됩니다.
이때, html 편집 버튼을 클릭하면 문제 발생시 직접 수정해야 한다는 살짝 겁을 주지만, 이정도는 무시해줘야죠~^^
확인 버튼을 누르고 진입합니다.
파일업로드를 클릭한 후 추가 버튼을 눌러 다운로드 받은 clipboard-min.js 파일을 업로드 시켜주면 됩니다.
제일 마지막에 clipboard-min.js 파일이 업로드 된 것을 확인했으면, 다음단계로 갑니다.
3. HTML 코드를 수정하여 clipboard-min.js 라이브러리를 사용.
clipboard-min.js 파일을 사용하기 위해 다운로드 받고 티스토리에 업로드까지 시켰으니, 이제는 사용을 할 수 있도록 코드 수정을 해줘야 합니다.
① 업로드한 clipboard-min.js 파일을 사용할 수 있도록 하기 위한 코드 추가입니다.
반드시 </head> 위에 넣어줘야 합니다.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./images/clipboard.min.js"></script>
만약, 이전에 jquery를 사용하여 꾸미기를 진행했었던 적이 있다면, 첫번째 줄은 이미 있을지 모르니 확인하는 것이 중요합니다. 만약에 있다면 두번째 줄만 추가해서 넣으면 됩니다.
② Copy 버튼을 넣어주고, 버튼을 클릭시 복사가 완료되어 Copy OK!를 나타나게 해서 복사가 완료 되었다는 것을 알려주는 코드 추가입니다. 위의 코드 바로 밑에 붙여주시면 됩니다.
<!--코드블럭에 COPY 버튼 나오도록 하는 시작-->
<script>
$(document).ready(function () {
$('pre[id^="code"]').each(function (index, e) {
let button = document.createElement('button');
button.innerText = "Copy";
button.className = 'copy-button';
button.style.cursor = 'pointer';
button.setAttribute('data-clipboard-text', e.innerText);
button.addEventListener('mouseleave', function(event) {
event.currentTarget.setAttribute('class', 'copy-button');
event.currentTarget.removeAttribute('copy-message');
});
e.appendChild(button);
});
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function (e) {
e.clearSelection();
e.trigger.setAttribute('class', 'copy-button copy-message');
e.trigger.setAttribute('copy-message', 'Copy OK!');
});
});
</script>
<!--코드블럭에 COPY 버튼 나오도록 하는 종료-->
4. 버튼을 모양을 위한 CSS 처리.
이제 복사버튼을 만들어서 사용할 수 있게 되었습니다. 이젠 버튼 모양을 조금 만져주기 위해서 CSS를 추가해주겠습니다.
/*코드블럭 버튼 설정 시작*/
pre {
position: relative;
overflow: visible;
}
pre .copy-button {
opacity: 0;
position: absolute;
right: 4px;
top: 2px;
padding: 2px 6px;
color: #aaa;
background: rgba(0,0,0,.6);
border-radius: 5px;
transition: opacity .3s ease-in-out;
}
pre:hover .copy-button {
opacity: 1;
}
pre .copy-button:hover {
color: #eee;
transition: all ease-in-out 0.3s;
}
pre .copy-button:active {
color: #4B00FF;
transition: all ease-in-out 0.1s;
}
.copy-message:before {
content: attr(copy-message);
position: absolute;
left: -85px;
top: 0px;
padding: 2px 6px;
color: #fff;
background: rgba(0,0,0,.6);
border-radius: 5px;
}
/*코드블럭 버튼 설정 종료*/
이제 모두 다 됐습니다.
반드시 마지막은 적용!! 입니다.
적용버튼을 클릭하면 완료입니다.
'티스토리 Tip' 카테고리의 다른 글
[티스토리 로딩 화면 만들기 2] 로딩 화면 소스코드 포함 (1) | 2022.01.05 |
---|---|
[티스토리 로딩 화면 만들기 1] 로딩 이미지 다운 사이트 모음. (0) | 2022.01.05 |
[3차 종료] (No 선착순) MadebyAn의 세 번째 초대장 나눔~!! (25) | 2017.09.09 |
[2차 종료] MadebyAn의 두 번째 초대장 나눔~!! (19) | 2017.09.01 |
[1차 종료] MadebyAn의 첫 번째 초대장 나눔~!! (23) | 2017.08.30 |
댓글