Tistory > 코드 블럭에 '코드 복사' 버튼 만들기

코드 블록에 코드 복사 버튼 만들기!

 

 

clicpboard.js 다운로드

clipboard.min.js

0.01MB

 

CodeBlockCopy.js 다운로드

CodeBlockCopy.js

0.00MB

 

 

블로그 설정 > 꾸미기 > 스킨 편집

 

스킨편집 > html 편집

 

 

파일업로드 > 파일 추가

 

 

HTML 편집

편집창 head 앞에 스크립트 추가

<!-- 코드복사 버튼 -->
<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>

 

 

body 앞 스크립트 추가

<!-- 코드 복사하기 body 앞-->
<script src="./images/CodeBlockCopy.js"></script>
</body>

 

 

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;
}
/* 코드복사 버튼 */

 

 

 

 

 

나매니저님 글 참고했다. 감사합니다!!

https://vision-coding.tistory.com/11

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