티스토리 코드블럭 사용법 (테마 변경·모바일 대응·복사 버튼)

안녕하세요, 코딩하는 안다형입니다. 개발이나 설정 관련 글을 쓸 때 코드를 그냥 본문에 붙여넣으면 줄바꿈이 깨지고 들여쓰기가 사라져 읽기가 어렵습니다.

티스토리에는 코드블럭 기능이 있어서, 몇 번 설정해두면 문법 강조까지 자동으로 적용됩니다. 오늘은 설정부터 모바일 대응까지 정리해 드리겠습니다.

1. 코드 문법 강조 플러그인 켜기

1. 블로그 관리 → 꾸미기 → 플러그인으로 들어갑니다.
2. 코드 문법 강조 플러그인을 찾아 클릭합니다.
3. 원하는 테마를 선택합니다. 어두운 배경 테마가 코드 가독성이 좋습니다.
4. 적용을 눌러 저장합니다.

테마는 나중에 언제든 바꿀 수 있고, 바꾸면 이미 발행한 글에도 한꺼번에 반영됩니다.

2. 글에 코드블럭 넣기

글쓰기 화면 툴바의 더보기(…) 메뉴에서 코드블럭을 선택하면 입력 창이 열립니다. 여기에 코드를 붙여넣고 언어를 지정하면 끝입니다.

언어를 정확히 지정해야 문법 강조가 제대로 들어갑니다. HTML, CSS, JavaScript, PHP, SQL, Bash 등 대부분 지원합니다.

코드 넣는 방법 비교

3. 모바일에서 코드가 잘릴 때

긴 코드는 휴대폰 화면을 넘어갑니다. 스킨 CSS에 아래 한 덩어리만 넣어두면 가로 스크롤이 생겨 읽기 편해집니다.

pre, pre code{
  overflow-x:auto;
  white-space:pre;
  -webkit-overflow-scrolling:touch;
  font-size:14px;
  line-height:1.6;
}
pre{border-radius:10px;padding:16px;}

꾸미기 → 스킨 편집 → html/css 편집의 CSS 영역 맨 아래에 붙여넣고 저장하면 됩니다.

4. 코드 복사 버튼 붙이기

독자가 코드를 그대로 가져다 쓰는 글이라면 복사 버튼이 있으면 훨씬 친절합니다. 스킨에 아래 스크립트를 넣어두면 모든 코드블럭에 자동으로 버튼이 붙습니다.

document.addEventListener("DOMContentLoaded", function(){
  document.querySelectorAll("pre").forEach(function(pre){
    var btn = document.createElement("button");
    btn.innerText = "복사";
    btn.className = "code-copy";
    btn.onclick = function(){
      navigator.clipboard.writeText(pre.innerText);
      btn.innerText = "복사됨";
      setTimeout(function(){ btn.innerText = "복사"; }, 1200);
    };
    pre.style.position = "relative";
    pre.appendChild(btn);
  });
});

버튼 위치는 CSS에서 .code-copy{position:absolute;top:10px;right:10px;} 정도로 잡아주면 오른쪽 위에 깔끔하게 붙습니다.

5. 코드 글을 쓸 때 챙기면 좋은 것

• 실행 결과도 함께 보여주면 신뢰도가 올라갑니다.
• 코드가 길면 핵심 부분만 따로 떼어 설명하고 전체는 아래에 한 번 더 넣습니다.
• 주석을 한글로 달아두면 초보 독자에게 훨씬 친절합니다.
• 버전 정보를 명시하세요. 몇 년 뒤에 읽는 사람에게 중요한 단서가 됩니다.

자주 묻는 질문

Q. 코드블럭에 문법 강조가 안 됩니다.

플러그인이 꺼져 있거나 언어 지정을 안 한 경우입니다. 두 가지를 먼저 확인해 보세요.

Q. 코드 안의 부등호가 사라집니다.

HTML 태그로 인식된 경우입니다. 코드블럭 기능을 쓰면 자동으로 처리되지만, HTML 모드에서 직접 넣을 때는 < 형태로 변환해야 합니다.

Q. 테마를 바꾸면 기존 글도 바뀌나요?

네, 스킨 단위로 적용되기 때문에 이미 발행한 글에도 함께 반영됩니다.

마무리

정리하면 플러그인 켜기 → 테마 선택 → 코드블럭 삽입 → 모바일 CSS 보완 순서입니다. 코드를 이미지로 올리는 습관만 버려도 독자 만족도와 검색 노출이 함께 올라갑니다.

 

함께 보면 좋은 글

• 티스토리 구글 서치콘솔 등록 방법 총정리
• 예쁜 버튼 만들기 CSS
• 맥 스타일의 창 만들기 CSS
• 로또 번호 생성기 만드는 방법 html