티스토리 코드영역 클립보드 만들기 (feat. 적용안될때)

클립보드

티스토리에서 코드영역의 클립보드를 넣는 글을 찾아보면 수많은 글들이 보입니다. 몇몇 방법을 적용해 봤는데 적용이 되는 것이 있고 안 되는 것이 있었습니다. 오늘은 유명한 스킨인 모카스킨에 적용하는 방법과 일반적인 Poster스킨에 클립보드가 적용되지 않을 때 다른 방법으로 적용하는 것을 알아보겠습니다.

----

----

모카스킨

모카스킨이 적용되어 있지 않으시다면 https://mochaskin.tistory.com/ 로 방문하셔서 자료를 받아주시기 바랍니다. 설치방법도 자세히 설명되어있습니다. 제가 이런 거 저런 거 설명해 드려도 되지만 제작자분의 노고가 있으시니 자세한 내용은 제작자분의 블로그에서 확인해 보시는 게 좋을 것 같습니다. 참고로 모카스킨은 화면로딩이 빠른 장점이 있습니다.

모카 스킨이 적용되셨다면

clipboard.min.js

0.01MB

위의 파일을 다운받아주세요

작업순서

1. clipboard.min.js 파일을 업로드
2. 스킨 html 편집 header 영역과 body 영역에 script 추가
3. css에 클립보드 디자인으로 사용할 코드 추가

파일업로드

티스토리 스킨편집

스킨편집 메뉴

티스토리 관리화면에서 스킨편집을 누르시고 'html 편집'을 눌러 html 화면으로 진입합니다.
'파일 업로드'를 누르고 다운받은 clipboard.min.js 를 추가해 줍니다.
'+추가' 버튼은 하단에 있습니다.

클립보드 스크립트 추가

'HTML'을 눌러서 편집화면에 진입해서 가장 먼저보이는 </header> 바로 위에 클립보드 스크립트를 적용해 줍니다.

<!-- 클립보드 버튼 -->
<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>
<!-- 클립보드 버튼 -->

그리고 가장아래로 내려와서 </body> 영역 바로 위에도 스크립트를 적용해 줍니다.

<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','복사완료!');
    });
});
// 클립보드 버튼
</script>

사용자마다 다를 수 있지만 대략적으로 다음과 같이 적용된 화면을 보실 수 있습니다.

클립보드 header 추가

클립보드 body 추가

CSS 디자인 추가

'CSS'를 눌러서 아래의 코드를 추가해 줍니다.
추후에 코드를 찾을 때 용의 하도록 가장 아랫부분으로 내려서 기존 코드와 분간이 되도록 삽입합니다.

/* 클립보드 버튼 */
pre {
	position: relative;
	overflow: visible;
}
pre .copy-button {
	opacity: 0;
	position: absolute;
	right: 8px;
	top: 4px;
	padding: 6px 18px;
	color: rgb(255, 255, 255);
	background: #003049;
	border-radius: 5px;
	transition: opacity .3s ease-in-out;
}
pre:hover .copy-button {
	opacity: 1;
}
pre .copy-button:hover {
	color: #ffffff;
	transition: all ease-in-out 0.3s;
}
pre .copy-button:active {
	color: #33f;
	transition: all ease-in-out 0.1s;
}
.copy-message:before {
	content: attr(copy-message);
	position: absolute;
	left: -95px;
	top: 0px;
	padding: 6px 18px;
	color: #ffffff;
	background: rgba(255, 0, 0, 0.6);
	border-radius: 5px;
}
/* 클립보드 버튼 */

이제 완성되었습니다. 마우스를 올리면 'Copy'가 보이고 클릭하면 '복사완료!' 글자가 보입니다.

클립보드 복사

여기까지 했을 때 웬만하면 정상적으로 표시가 될 겁니다. 그런데 복사했을 때 코드는 나오지 않고 출처만 표시되는 경우가 있습니다. 그에 대한 원인은 css 비교해 보고, html도 비교해 봤는데 명쾌한 답은 찾을 수 없었습니다. 그래서 아래와 같은 방법으로 적용했을 때는 잘 작동했습니다.

 

Poster 스킨

모카스킨은 제가 테스트로 사용 중인 블로그에서 확인해봤고 현재 필자가 사용중인 Poster 스킨에 적용법을 알려드리겠습니다.

clipboard.min.js

0.01MB

clippy2.png

0.00MB

CodeBlockCopy.js

0.00MB

jquery-3.3.1.min.js

0.08MB

위의 파일을 모두 다운 받아주세요

작업순서

1. 파일을 업로드
2. 스킨 html 편집 header 영역과 body 영역에 script 추가
3. css에 클립보드 디자인으로 사용할 코드 추가

위에 했던 작업과 같습니다. 다만 스크립트의 내용이 변경됩니다.
주의할 점은 업로드된 파일의 경로가 스크립트에 작성된 경로와 같은지 잘 봐주세요
./images/clipboard.min.js 이것이 파일의 경로입니다.

아래 내용을 </header> 영역에 넣어주세요

<!--클립보드-->
<script src="./images/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./images/clipboard.min.js"></script>
<!--클립보드-->

아래 내용을 </body> 영역에 넣어주세요

</script>
<!--클립보드-->
<script src="./images/CodeBlockCopy.js"></script>
<!--클립보드-->

아래 내용을 CSS에 넣어주세요

/*클립보드*/
pre {
    position: relative;
    overflow: visible;
    display: block;
    font-family: monospace;
    line-height: normal;
    padding-left: 0px;
    padding-right: 0px;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 20px;
}

pre code {
    line-height: 23px; /* 글 상하간격 */
    margin: 0;
    font-size: 0.6em;
    letter-spacing: -0.6pt;
    font-family: "menlo";
    border-radius: 0px;
}

@media (min-width:992px) {
    pre code {
        font-size: 0.9em;
    }
}

/*클립보드 애니메이션*/
@keyframes copy-btn-ani {
    25% {
        transform: rotate(0deg) scale(1.05);
    }

    50% {
        transform: rotate(0deg) scale(1);
    }

    75% {
        transform: rotate(0deg) scale(1.05);
    }
}

.dark-mode pre .copy-btn {
     background: #1a1a1a9c;
}
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;
    position: absolute;
    background: #333842;       /* 카피버튼 색상 */
    border: 1px solid #676767; /* 카피버튼 태두리 색상 */
		border-radius: 5px 5px 5px 5px;
    right: 15px; /* 버튼 우측 여백 */
    top: 6px; /* 버튼 높이 위치 */
}

.copy-btn:hover {
    animation: copy-btn-ani 0.8s linear 1;
}

pre:hover .copy-btn,
pre .copy-btn:focus {
    opacity: 1;
}

.clippy {
    margin: 5px 5px 5px 5px; /* 카피버튼 내부 여백 */
    position: relative;
    top: 0px;
    filter: invert();
}

.copy-btn[disabled] .clippy {
    opacity: .3
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none;
    }
}
/* 클립보드 끝*/

적용이 잘 되었다면 마우스를 코드영역에 올렸을 때 아래와 같이 표시됩니다.

도움이 되셨길 바랍니다.

 

다른 정보도 있으니 도움이 되셨으면 합니다.

애드센스 수동광고와 자동광고의 위치와 조회가능 Active View

일잘러 사장님의 구글 스프레드시트 기초 팁