자바스크립트, 파이썬, HTML5 등등등 코드 관련 블로그를 하다 보면 여기저기 다른 여럿 블로그에 정보를
보면서 기재되어있는 소스를 사용하면서 어떤 블로그는 복사 방지로 인해 아예 막아놨고..
어떤 블로그는 소스를 복사하면 한 줄로 나오고.... 이것저것 내가 겪어보니 불편하다는 생각이 들어
티스토리 블로그 코드 블록에 마우스를 오버하면 그 코드를 클립보드에 복사하는 버튼을 어떻게 적용하는
지 알아보자.
오늘 이거 하려고 진짜 하루종일 개고생 한 거 생각하면 화가 치밀어 오른다.... 별 것도 아니었는데...
처음 시도하는건 역시 어렵다... 이것도 여기저기 블로그 검색해서 시도해봤는데... 각각 블로그마다 제공하는 파일이 다르고...
그리고 어떤 블로그는 설명이 간략하게 해 놔서 내용이 빈약해 따라 하다가 안되고, 어떤 블로그에 나온 글은 제대로 했는데 적용 자체가 안됐고...
어쨌든 개고생 경험을 하고 나서 얻은 지식이기 때문에 누구나 따라 할 수 있게 하나도 빠짐없이 기록을 해보자.
시작하기 앞서 필요한 준비물
1. 복사하기 버튼 이미지 (구글링 이미지 검색해서 무료 이미지 아무거나 사용해도 된다.)
2. 클립보드에 복사하는 기능이니 이 기능을 담은 자바스크립트 파일 (clipboard.js) 이 필요하다.
3. 이 clipboard.js의 기능을 사용하기 위해 일반 사용자가 작성한 자바스크립트 파일 (CodeBlockCopy.js) 이 것도 준비하자.
4. 버튼을 클릭했을 때 눈으로 보이는 CSS 부분을 아래 코드에서 제공하는 코드를 사용하자.
그냥 이 블로그에서 제공하는 파일을 다 사용하는 게 편하다 여기저기 사이트 돌아다녀서 이것저것 다운로드하여서 개고생 하지 말고 첨부파일 다운로드를 하여서 준비하자. (첨부파일 받으면 된다.)
난 그래도 정식 사이트가서 파일을 받고 싶다면 아래 사이트 가서 직접 다운로드하여서 준비하면 된다.
clipboard.js 이 파일은 https://github.com/zenorocha/clipboard.js 여기 가서 다운 받으면 된다.
CodeBlockCopy.js 이 파일은 일반 유저가 작성한 자바스크립트 파일이다...
이 파일은 여기저기 블로그 돌아다녀서 다운로드하여서 사용해도 되고,
내가 프로그래밍 좀 한다! 하면 본인 스스로가 만들어서 사용해도 된다.
아니면 다른 여기저기 블로그 돌아다니면서 파일을 구해서 자신의 입맛에 맞게 커스터마이징 해도 된다.
난 맨처음 다른 블로그 보고 무작정 따라 하면서 이 파일이 왜 다른 블로그마다 소스가 다른지
이해가 안가서 여기저기 파일 구해다가 다 적용도 해 보았지만.. 오류도 나고.. 개고생 겁나 함..
나중에.. 소스 분석해보니.. 그냥
일반 유저가 clipboard.js에 있는 기능을 사용하려고 기능을 만든 (일반 유저가 만든) 자바스크립트 파일이란 걸 알았다...
역시 무지 성으로 다른 블로그 보면서 막 따라 하면서 난 왜 안되지?
이런 멍청한 나 자신을 발견한다... 제기랄....
이 것도 각 블로그에서 제공하는 파일마다 달라서... 내가 제공하는 소스도 다른 블로그에서 가져와 좀 커스터마이징 했을 뿐... 암튼 다 준비가 됐다면 시작해보자 그냥 이 블로그에서 제공하는 소스를 사용하자
codeBlock CSS
pre {
position: relative;
overflow: visible;
background-color: #eee;
display: block;
font-family : monospace;
font-size:13px;
line-height : normal;
margin-top: 1em;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 10px;
padding-right: 10px;
}
pre code {
font-size: 14px;
line-height: 20px
}
pre .copy-btn {
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
padding: 2px 6px;
position: absolute;
right: 4px;
top: 8px
}
pre:hover .copy-btn,pre .copy-btn:focus {
opacity: 1
}
.clippy {
margin-top: -3px;
position: relative;
top: 3px
}
.copy-btn[disabled] .clippy {
opacity: .3
}
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.tooltipped {
position: relative
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0,0,0,.8);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0,0,0,.8);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after {
display: inline-block;
text-decoration: none
}
.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after {
display: table-cell
}
.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0,0,0,.8)
}
.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw:after {
margin-right: -15px
}
.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0,0,0,.8)
}
.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw:after {
margin-right: -15px
}
.tooltipped-s:after,.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0,0,0,.8)
}
.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0,0,0,.8)
}
자 이렇게 총 4개의 준비물이 완료가 되었다면 잠깐 설명하고 진행해 보자.
시작 전에 대략 CodeBlockCopy.js 이 소스에 대해 좀 알아볼 필요가 있다.
왜냐하면 이 소스에서 버튼 이미지의 경로를 적어주어야 하기 때문에 혹은 버튼 사이즈를 조정하거나
혹은 복사했을 때 복사가 되었다는 메시지를 적고 싶다거나...
등등 조금이나마 본인의 입맛에 맞게 수정을 할 수가 있다.
우선 이 블로그에서 제공하는 소스를 다 내려받아서 진행한다면 아무런 수정 없이 밑에 적용하기
그냥 따라 하면 된다. 하지만 난 그게 싫다 먼가 다르게 하고 싶다 하면
지금 이 소스 중 본인이 수정할 수 있는 능력껏 수정해서 사용하면 된다.
CSS 소스도 본인 스스로가 이쁘게 꾸미고 싶다 하면 수정해서 사용하면 된다.
첨부한 파일을 내려받아 CodeBlockCopy.js 이 소스를 열어보면 아래와 같이 소스 내용이 나온다.
본인에 입맛에 맞게 수정을 한다면 옆에 주석을 달라 놓을 테니 알아서 입맛에 맞게 수정 진행하면 된다.
// codeCopyButton.js
let pre = document.querySelectorAll('pre'); // 이 pre 태그를 왜 쓰냐면 티스토리 블로그에서 제공하는 코드블럭 삽입이 pre 태그로 되어져 있어서 그렇다.. 이유없다 이거 바꾸면 아무것도 적용 안된다.. 그냥 쓰자..
pre.forEach((snippet) => { // 코드 블럭을 전부 다 찾아서 버튼을 생성해서 코드블럭에 붙이는 내용이다.
let button = document.createElement('button');
button.className = 'copy-btn'; // 꼴리는데로 클래스 이름 적고 싶은데로 해도 됨.
button.style.cursor = 'pointer'; // 버튼 커서 무난하게 포인트로 적용함
button.addEventListener('mouseleave', clearTooltip); // 버튼에 마우스가 벗어나면 clearTooltip 이 함수를 실행.
button.addEventListener('blur', clearTooltip); // 버튼에 포커스가 해제 되었을때 clearTooltip 이 함수를 실행.
let img = document.createElement('img'); // 이미지 태그 만들어서
img.className = "clippy"; // 클래스 이름 꼴리는데로 적고.
img.setAttribute('width', '40'); // 이 부분 버튼 사이즈 적는곳 난 40이 크고 적당해서 이렇게 사용함
img.setAttribute('src', 'https://tistory1.daumcdn.net/tistory/5242077/skin/images/copyImg.png'); // 이 부분이 중요함 업로드해서 버튼이미지 올린 경로이다.
img.setAttribute('alt', 'Copy to clipboard');
button.appendChild(img);
snippet.appendChild(button);
});
let copyCode = new ClipboardJS('.copy-btn', { // 이 부분이 clipboard.js 에서 제공하는 라이브러리를 사용하겠다 하는 부분. 이거 앞에 클래스 이름 들어가는곳인데 잘 못적으면 적용안되니 클래스 이름 전부 통일해서 적용하자.
target: function(trigger) {
return trigger.previousElementSibling;
}
});
copyCode.on('success', function(event) { // 이 부분이 버튼클릭해서 복사가 완료되면 호출되는 곳
event.clearSelection();
showTooltip(event.trigger, '복사완료!');
});
copyCode.on('error', function(event) { // 복사가 안되었을 때 호출되는곳 즉, 에러났을 때...
showTooltip(event.trigger, fallbackMessage(event.action));
});
function clearTooltip(event) { // 툴팁 클리어시 호출
event.currentTarget.setAttribute('class', 'copy-btn');
event.currentTarget.removeAttribute('aria-label');
}
function showTooltip(elem, msg) { // 복사 완료시... 호출..
elem.setAttribute('class', 'copy-btn tooltipped tooltipped-s');
elem.setAttribute('aria-label', msg);
}
function fallbackMessage(action) {// 에러메시지 뜰때 호출
let actionMsg = '';
let actionKey = (action === 'cut' ? 'X' : 'C');
if (/iPhone|iPad/i.test(navigator.userAgent)) {
actionMsg = 'No support :(';
} else if (/Mac/i.test(navigator.userAgent)) {
actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
} else {
actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
}
return actionMsg;
}이 소스에서 그냥 간단하게 수정하고 싶다 하면 이미지 경로 및 버튼 그리고 복사 완료 시 메시지 정도?
적용하기
1. 티스토리 개인 블로그 관리 창 옆에 스킨 편집 버튼을 클릭한다.
2. 스킨 편집 난 Square 스킨을 사용하고 다른 스킨에다가 적용은 안 해봤음... html 편집 버튼을 클릭하자
3. 파일 업로드 버튼을 클릭하고 아래 추가 버튼을 클릭해서 파일을 업로드한다..(버튼 이미지, clipboard.min.js) 2개 파일 업로드한다.
4. 버튼 이미지 올린 경로를 알아보자. 아래 업로된 버튼 이미지를 오른쪽 마우스 클릭하면 링크 주소 복사 나오는데 이걸 클릭하자.
5. 메모장 CodeBlockCopy.js 이걸 메모장이든 무엇이든 편집할 수 있는 편집기를 오픈해서 소스를 수정한다. 수정하는 부분은 위에서 코드 블록에서 주석으로 설명했으니 그 부분에다가 경로를 적어주고 수정이 완료가 되었다면 CodeBlockCopy.js 이 파일마저도 업로드를 진행하자.
6. 총 3개 파일이 업로드가 완료가 되었다면 위 상단 HTML을 클릭하자. 이 HTML은 현재 자신의 블로그에서 사용하는 스킨의 HTML 소스이다. 그러므로 위 업로드한 3개 파일을 이 블로그에서 적용되게 만들어야 하기 때문에 HTML에 소스를 추가할 것이다.
7. HTML 소스 상단 부분 </head> 태그가 닫히는 위에 <script src="./images/clipboard.min.js"></script> 추가.
8. HTML 소스 하단 부분 </body> 태그가 닫히는 위에 <script src="./images/CodeBlockCopy.js"></script> 추가. 그리고 윗 상단 적용 버튼 클릭
9. CSS 클릭 후 맨 아래 스크롤 내리고 이 블로그에서 제공하는 CSS 복사해서 붙여 넣기 함. 그리고 적용 하기 버튼 클릭
이렇게 하면 완료....
처음이 어렵지 해보니깐 아무것도 아니다... 개고생 해서 얻은 지식 남겨본다....
적용하기 부분을 전부 따라 해서 완료했다면 이제 테스트를 해볼 시간이다.
우선 블로그 글쓰기로 해서 글 작성을 해본다.
블로그 글쓰기 시작하면 위 빨간 박스 되어 있는 부분 코드 블록 추가해서
위 이미지처럼 코드 블록 삽입 레이어 팝업창이 뜨고
위 HTML 클릭하면 여러 개 언어를 선택해서 작성할 수 있다.
난 HTML을 코드를 작성할 거니깐 HTML 선택으로 하고
코드 삽입란에 HTML 코드 아무거나 작성하고 확인 버튼을 클릭한다.
이렇게 코드 블록이 삽입이 완료되었다면 우측 하단에 완료 버튼 클릭하여 글을 발행해보자.
이렇게 글이 발행이 완료가 되면 그 글을 들어가면 코드블럭 되어 있는 노랑 부분에 마우스를 오버하면 빨간색 복사 버튼 이미지가 나타나며 저걸 클릭하면 클립보드에 저 코드가 복사가 된다.
미션 클리어...
'기록하고 싶은 모든 것 > 지식' 카테고리의 다른 글
| 티스토리 구글애드센스(google AdSense) 계좌 등록 방법 (0) | 2022.04.06 |
|---|---|
| HTML 문서 타입(표준, 비표준 모드) (0) | 2022.02.20 |
| 티스토리 블로그 네이버(naver) 검색, 유입 설정하는법, 적용 (0) | 2022.02.17 |
| 검색 엔진 스파이더와 웹 페이지 구획 요소(태그-tag) 관계 (0) | 2022.02.15 |
| HTML5가 되기 까지 (0) | 2022.02.13 |