보여 주기 용도의 소스 코드는 일반 단락에 넣어도 되지만 코드 블록에 넣어주면 보기에도 깔끔하고 사용자들이 복사하기에도 좋다. 이 글은 코드 블록을 적용하는 방법과 복사 버튼을 만드는 방법을 설명한 글이다.
일반 단락과 코드 블록, 사용자 정의 HTML 블록 차이
- 일반 단락에 코드를 넣으면 브라우저가 일반 텍스트로 인식하여 보여주므로 코드처럼 보이게 하려면 줄 간격과 줄 바꿈 등을 조정해야 하는 경우가 있다.
- 사용자 정의 HTML 블록은 브라우저가 블록 안의 코드를 HTML로 해석해서 실행해서 보여주는 블록이다.(애드센스 코드나 사용자 정의 서식 등에 사용)
- 코드 블록은 기본적으로 줄 바꿈이나 간격을 코드처럼 자동으로 처리해 디자인이 깔끔해진다. 워드프레스는 코딩 언어에 특화된 폰트 “Fira Code”를 코드 블록에 디폴트로 적용한다.
코드 블록 설치하는 방법
워드프레스는 < > 코드라는 이름으로 블록으로 제공하고 있으므로 편집기에서 < > 코드 블록을 선택 후 사용하면 되고, 티스토리는 “코드 문법 강조(Syntax Highlight)” 플러그인을 적용하면 된다.
참고로 티스토리 코드 플러그인은 Atom One Dark, Github 등 7가지의 서식을 제공하고 있다.
코드 블록 복사 버튼 만드는 방법
워드프레스에서 코드 블록 복사 버튼은 플러그인이나 functions.php 파일에 소스 코드를 추가하여 만들 수 있다.
복사 버튼 하나 만들기 위해 플러그인을 설치하는 것은 에바이므로 functions.php 파일과 CSS 파일을 활용할 것을 추천한다.
functions.php 파일 수정
아래 소스 코드를 functions.php 파일에 붙여 넣기 한다. 자식 테마를 만들어서 functions.php 파일에 붙여 넣으면 테마가 업그레이드 되더라도 복사 버튼을 계속 사용할 수 있다.
// 코드블럭 복사 버튼 functions.php
function add_copy_button_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('pre').forEach((pre) => {
const code = pre.querySelector('code');
if (!code) return;
const wrapper = document.createElement('div');
wrapper.className = 'code-wrapper';
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
const button = document.createElement('button');
button.className = 'copy-btn';
button.innerHTML = `
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34 8.34 2 10 2H19C20.66 2 22 3.34 22 5V14C22 15.66 20.66 17 19 17H17V19C17 20.66 15.66 22 14 22H5C3.34 22 2 20.66 2 19V10C2 8.34 3.34 7 5 7H7V5ZM9 7H14C15.66 7 17 8.34 17 10V15H19C19.55 15 20 14.55 20 14V5C20 4.45 19.55 4 19 4H10C9.45 4 9 4.45 9 5V7ZM5 9C4.45 9 4 9.45 4 10V19C4 19.55 4.45 20 5 20H14C14.55 20 15 19.55 15 19V10C15 9.45 14.55 9 14 9H5Z" fill="currentColor"/>
</svg> 복사
`;
wrapper.insertBefore(button, pre);
button.addEventListener('click', () => {
navigator.clipboard.writeText(code.innerText).then(() => {
button.innerHTML = '✅ 복사됨!';
setTimeout(() => {
button.innerHTML = `
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34 8.34 2 10 2H19C20.66 2 22 3.34 22 5V14C22 15.66 20.66 17 19 17H17V19C17 20.66 15.66 22 14 22H5C3.34 22 2 20.66 2 19V10C2 8.34 3.34 7 5 7H7V5ZM9 7H14C15.66 7 17 8.34 17 10V15H19C19.55 15 20 14.55 20 14V5C20 4.45 19.55 4 19 4H10C9.45 4 9 4.45 9 5V7ZM5 9C4.45 9 4 9.45 4 10V19C4 19.55 4.45 20 5 20H14C14.55 20 15 19.55 15 19V10C15 9.45 14.55 9 14 9H5Z" fill="currentColor"/>
</svg> 복사
`;
}, 1500);
});
});
});
});
</script>
<?php
}
add_action('wp_footer', 'add_copy_button_script');복사를 상징하는 이모지는 없으므로 따로 SVG(Scalable Vector Graphics) 파일로 복사 버튼 모양을 구현한다.
style.css 파일 수정
그 다음 아래 소스 코드를 복사하여 자식 테마의 style.css 파일에 추가하거나 테마 편집기에서 “추가 CSS”에 붙여 넣기 하면 이 사이트의 코드 블록의 오른 쪽 위에 보이는 복사 버튼과 같은 모양의 버튼이 나타난다.
/* 코드블록 복사버튼 CSS */
.code-wrapper {
position: relative;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
font-size: 0.85rem;
background: transparent;
color: #ffffff;
border: none;
border-radius: 6px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.2s ease, background-color 0.2s ease;
z-index: 10;
}
.copy-btn:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.05);
}
pre {
padding: 1em;
background: #f5f5f5;
border-radius: 8px;
overflow: auto;
position: relative; /* wrapper용 */
}
.wp-block-code {
background-color: #333333;
color: #FFFFFF;
}복사 버튼 자바스크립트로 만들기
복사 버튼은 사실 위에서 한 것처럼 functions.php 파일에 넣는 것보다 자바스크립트(js)로 구현하면 사이트의 구조가 단순해질 뿐만 아니라 속도도 빨라지고 나중에 유지 보수에도 좋다. 복사 버튼을 자바스크립트(js)로 만드는 순서는 아래와 같다.
copy-button.js 파일 생성
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('pre').forEach((pre) => {
const code = pre.querySelector('code');
if (!code) return;
const wrapper = document.createElement('div');
wrapper.className = 'code-wrapper';
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
const button = document.createElement('button');
button.className = 'copy-btn';
button.innerHTML = `
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path>
</svg>
<span>복사</span>
`;
wrapper.insertBefore(button, pre);
button.addEventListener('click', () => {
navigator.clipboard.writeText(code.innerText).then(() => {
button.querySelector('span').innerText = '복사됨!';
setTimeout(() => button.querySelector('span').innerText = '복사', 2000);
});
});
});
});- 위의 소스 코드를 복사하여 메모장에 붙여 넣은 후 파일 이름을 “copy-button.js”으로 저장한다.
/wp-content/themes/차일드테마명/아래에js폴더를 만든다./wp-content/themes/차일드테마명/jsjs폴더에 copy-button.js 파일을 업로드한다.
서버에 파일을 올리는 방법에는 여러가지가 있겠지만 파일질라를 사용하면 편하다. 파일질라 FTP 사용법에 대해서는 아래 글 참고
functions.php 파일 수정
위에서 붙여 넣기한 소스 코드를 아래 내용으로 대체한다.
// 코드블럭 복사 버튼 functions.php
function my_enqueue_copy_button_script() {
wp_enqueue_script(
'copy-button',
get_stylesheet_directory_uri() . '/js/copy-button.js', // js 폴더 안에 넣었을 경우
array(),
null,
true
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_copy_button_script');style.css 파일은 수정할 필요 없이 그대로 사용하면 된다. 복사 버튼 만드는 과정은 이것이 전부다.
댓글