[티스토리] 코드 블럭에 코드 복사 버튼 만들기

AligeJung님의 블로그를 참고하였는데, 일부 수정해서 올려본다!

(원본글)

티스토리 코드 복사하는 버튼 만들기

 

버튼 작동 방식

코드 블럭 밖에 마우스 커서가 있을 때는 아래와 같이 반투명한 상태로 있다가,

 

코드 블럭 위로 커서가 올라오면 어두워지고, Copy 버튼 위로 커서가 올라오면 (Hover) 배경과 글씨의 색이 반전된다.

 

그리고 버튼을 클릭하면 Copied! 로 바뀌고 2초 뒤에 원래의 Copy 버튼으로 되돌아 온다.

예시

 

1. clipboard.js 다운로드

clipboard.min.js

0.01MB

 

 

2. CodeBlockCopy.js 다운로드

CodeBlockCopy.js

0.00MB

 

 

3. 파일 첨부하기

블로그 설정 → 꾸미기 → 스킨 편집 → html 편집 → 파일업로드에 +추가 버튼 눌러서 js 파일 2개 추가

 

4. HTML 편집

html 편집 창에서 </head> 앞에 script 2개를 추가하여 js를 연결합니다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>

 

 

html 편집 창에서 </body> 앞에 script 1개를 추가하여 js를 연결합니다.

<script src="./images/CodeBlockCopy.js"></script>
</body>

 

*</head>와 </body>가 중복되지 않도록 주의!

 

 

5. CSS 편집

css 편집 창에서 가장 아래에 css를 추가합니다.

/* 코드블럭 복사버튼 스타일 */
pre {
    position: relative;
    overflow: visible;
    display: block;
    line-height: normal;
    padding-left: 0px;
    padding-right: 0px;
    white-space: nowrap;
    margin-top: 10px;
    margin-bottom: 10px;
}

pre code {
    line-height: 23px;
    margin: 0;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: -0.6pt;
    border-radius: 3px;
}

@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);
  }
}

/* 코드블럭 버튼 스타일 */
.copy-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  background: #1d2f3e; /* 버튼 색 */
  border-radius: 8px;
  padding: 4px 14px;
  color: white; /* 글자 색 */
  font-weight: 600;
  cursor: pointer;
  opacity: 0.2;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
}

.copy-btn:hover {
  animation: copy-btn-ani 0.1s linear 1;
  background: #1d2f3e20; /* hover 버튼 색 */
  color: #1d2f3e;  /* hover 글자 색 */
}

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

/* 툴팁 스타일 */
.tooltipped:after {
  position: absolute;
  z-index: 999999;
  overflow: visible;
  display: block;
  line-height: normal;
  white-space: nowrap;
  margin: 0px;
  font: normal 14px/1.5;
  color: #fff;
  text-align: center;
  pointer-events: none;
  content: attr(aria-label);
  background: #1d2f3e;
  border-radius: 8px;
  padding: 5px;
  -webkit-font-smoothing: subpixel-antialiased;
}

.tooltipped {
  position: absolute; /* 버튼을 기준으로 위치를 조절하기 위해 절대 위치로 설정 */
  bottom: -30px; /* 원하는 위치로 조절할 수 있도록 bottom 값을 조절 */
  left: 50%; /* 가운데 정렬 */
  transform: translateX(-50%); /* 가운데 정렬 */
  background-color: #1a1a1a; /* 배경색 변경 */
  color: white; /* 글자색 변경 */
  padding: 5px 10px; /* 내부 여백 조절 */
  border-radius: 5px; /* 테두리 모서리 둥글게 */
  font-size: 12px; /* 글자 크기 조절 */
  transition: opacity 0.3s ease-in-out; /* 투명도 전환 효과 설정 */
}

.tooltipped-s:after,
.tooltipped-n:after {
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  color: #f0faff; /* 변경된 부분 */
  background-color: #1d2f3e; /* 변경된 부분 */
}

.tooltipped-w:after {
  right: 100%;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

.tooltipped-e:after {
  left: 100%;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

/* Redundant properties removed */
.tooltipped:before {
  display: none;
}

.copy-btn .tooltipped .tooltipped-s {
  background-color: white;
}

 

 

6. 코드 블럭의 상단 여백 늘리기

css 편집 창에서 코드 블럭 요소를 찾아서 padding을 원하는 만큼 조절해줍니다.

 

padding의 순서는 위 오른쪽 아래 왼쪽입니다. (4가지 다 작성할 경우)

padding: 위 오른쪽 아래 왼쪽

 

 

위에 차근차근 적용하면 완성!