[티스토리 코드블럭] 이거 몰라? 개발 블로거라면 필수

2025.04.18 - [분류 전체보기] - 블로그 방문자 급증?! 5분만에 끝내는 Bing 최상단 노출 비법!

개발 실력 향상의 숨겨진 열쇠, 티스토리 코드블록 활용법! 제대로 알고 계신가요?

안녕하세요, 개발자 여러분! 최근 저의 개발 블로그를 운영하면서 가장 많이 받는 질문 중 하나가 바로 "티스토리 코드블록 어떻게 사용하나요?"였습니다. 코드는 개발자의 언어와 같아서, 이를 명확하고 보기 좋게 전달하는 것은 매우 중요하죠.

오늘은 여러분의 코드 공유 능력을 한 단계 업그레이드해 줄 티스토리 코드블록의 모든 것에 대해 자세히 알아보겠습니다.

제가 직접 삽질하며 얻은 꿀팁들을 아낌없이 풀어놓을 테니, 집중하세요!

"왜 내 티스토리 글은 네이버에 안 나올까? 이 설정 하나면 OK!"

티스토리 블로그를 열심히 운영 중인데도 네이버 검색에 내 글이 안 보인다면?핵심은 바로 '서치어드바이저 등록'입니다! 안녕하세요! 저도 예전에 티스토리를 처음 시작했을 때, 분명 글을 열

firstreserve.junisstory.com

1. 티스토리 코드블록 기본 사용법

티스토리에서 코드블록을 사용하는 방법은 아주 간단합니다. 글쓰기 에디터에서 '코드' 블록을 선택하거나, HTML 모드에서 <pre><code> 태그를 직접 입력하는 방식이 있죠. 초보 개발자분들도 쉽게 따라 할 수 있도록 차근차근 설명해 드릴게요.

에디터에서 코드 블록 추가하기

티스토리 글쓰기 에디터 상단의 도구 모음을 보면, 다양한 블록 추가 버튼들이 있습니다. 그중에서 '코드' 또는 '<>' 모양의 버튼을 클릭하면 코드 블록을 삽입할 수 있습니다. 클릭 후 원하는 프로그래밍 언어를 선택하고 코드를 입력하면 끝! 정말 쉽죠?

# Python 예시 코드
def greet(name):
    print(f"Hello, {name}!")

greet("World")

HTML 모드에서 <pre><code> 태그 사용하기

좀 더 자유롭게 코드를 스타일링하고 싶거나, 특정 기능을 활용하고 싶다면 HTML 모드로 직접 <pre>와 <code> 태그를 사용하는 방법도 있습니다. <pre> 태그는 코드의 형식을 그대로 유지해 주고, <code> 태그는 해당 부분이 프로그래밍 코드임을 명시하는 역할을 합니다.

<pre>
  <code class="language-javascript">
    function sayHello() {
      console.log("Hello from HTML!");
    }
    sayHello();
  </code>
</pre>

위 예시에서 class="language-javascript"는 JavaScript 문법에 맞춰 색깔을 입혀주는 역할을 합니다. 이처럼 다양한 언어 클래스를 활용하면 더욱 보기 좋은 코드 블록을 만들 수 있죠.

2. 문법 강조(Syntax Highlighting) 설정

단순히 코드를 보여주는 것보다 각 구문 요소(변수, 함수, 키워드 등)에 따라 색상을 다르게 표시해 주는 문법 강조 기능은 코드의 가독성을 훨씬 높여줍니다. 티스토리에서는 몇 가지 방법으로 이 기능을 활성화할 수 있습니다.

플러그인 활용하기

티스토리 관리 페이지에서 '플러그인' 메뉴를 찾아보세요. '코드 문법 강조'와 관련된 플러그인을 활성화하면, 별도의 설정 없이도 코드 블록 내의 문법이 자동으로 강조되어 표시됩니다. 가장 기본적인 방법이며, 초보자에게 추천합니다.

CDN(Content Delivery Network) 활용하기

좀 더 다양한 스타일을 적용하고 싶다면, cdnjs나 jsDelivr 같은 CDN 서비스를 이용하여 Highlight.js나 Prism.js 같은 자바스크립트 라이브러리를 불러와 적용할 수 있습니다. 테마의 <head> 섹션에 해당 라이브러리의 CSS와 JS 파일을 링크하고, <code> 태그에 언어 클래스를 지정해 주면 됩니다.

예를 들어 Highlight.js를 사용하는 경우, 다음과 같이 <head> 태그 안에 CSS 링크를 추가합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai-sublime.min.css">

그리고 <body> 태그가 닫히기 직전에 JavaScript 코드를 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

마지막으로 코드 블록을 작성할 때 <code> 태그에 해당 언어의 클래스를 지정해 주면 문법 강조가 적용됩니다. 예를 들어 JavaScript 코드는 <code class="language-javascript">와 같이 작성합니다.

주요 문법 강조 라이브러리 비교
라이브러리	특징	장점	단점
Highlight.js	다양한 언어 지원, 자동 감지 기능	사용 편의성 높음, 활발한 커뮤니티	파일 크기가 상대적으로 큼
Prism.js	가볍고 빠름, 필요한 언어 및 플러그인 선택 가능	성능 우수, 사용자 정의 용이	초기 설정 필요

3. 다양한 코드 블록 스타일 활용

티스토리 기본 코드 블록 외에도, CSS를 활용하면 더욱 개성 있고 가독성 높은 코드 블록 스타일을 만들 수 있습니다. 몇 가지 예시를 보여드릴게요.

라인 넘버 표시: CSS의 counter-reset, counter-increment, ::before 가상 요소 등을 활용하여 각 코드 줄 앞에 번호를 매길 수 있습니다.
배경 및 테두리 스타일 변경: background-color, border 속성을 사용하여 코드 블록의 시각적인 스타일을 변경할 수 있습니다.
복사 버튼 추가: JavaScript와 CSS를 함께 활용하여 코드 블록 우측 상단에 '복사' 버튼을 추가하여 사용자의 편의성을 높일 수 있습니다.
다양한 테마 적용: Highlight.js나 Prism.js와 같은 라이브러리에서 제공하는 다양한 테마 CSS 파일을 적용하여 코드 블록의 분위기를 바꿀 수 있습니다.

이처럼 약간의 CSS 지식만 있다면 티스토리 코드 블록을 훨씬 멋지고 유용하게 활용할 수 있습니다. 다음 단계에서는 코드 블록 활용 꿀팁에 대해 더 자세히 알아보겠습니다.

4. 코드 블록 활용 꿀팁

여기서는 제가 블로그를 운영하면서 터득한 코드 블록 활용 팁들을 공유하고자 합니다. 이 팁들을 활용하면 여러분의 개발 블로그 콘텐츠가 더욱 풍성하고 전문적으로 보일 거예요.

명확한 언어 명시: 코드 블록을 삽입할 때 어떤 프로그래밍 언어인지 명확하게 지정해 주는 것이 좋습니다. 문법 강조가 제대로 이루어질 뿐만 아니라, 독자도 어떤 코드인지 쉽게 파악할 수 있습니다.
간결하고 핵심적인 코드 제시: 너무 길고 복잡한 코드보다는 핵심 내용을 담은 간결한 코드를 제시하는 것이 이해를 돕습니다. 필요하다면 전체 코드는 깃허브 링크 등으로 제공하는 것을 고려해 보세요.
주석 적극 활용: 코드만 덩그러니 있는 것보다 각 라인이나 블록에 대한 설명을 주석으로 덧붙여주면 독자의 이해도가 훨씬 높아집니다.
실행 결과 함께 제시: 코드의 실행 결과를 텍스트나 이미지 형태로 함께 보여주면 독자가 코드를 이해하고 실제로 어떻게 작동하는지 파악하는 데 도움이 됩니다.
코드 블록 내 검색 기능 활용 (고급): 일부 문법 강조 라이브러리나 플러그인은 코드 블록 내에서 특정 키워드를 검색하는 기능을 제공하기도 합니다. 이를 활용하면 독자가 원하는 부분을 빠르게 찾을 수 있습니다.

블로그 방문자 급증?! 5분만에 끝내는 Bing 최상단 노출 비법!

당신의 블로그, 아직도 Bing에 등록 안 하셨나요? 단 5분이면 검색 엔진 최상단 노출도 가능합니다! 안녕하세요, 블로그 운영하며 방문자수 늘리기 위해 고군분투 중인 블로거 여러분! 저도 예전

firstreserve.junisstory.com

5. 코드 블록 사용 시 문제 해결

코드 블록을 사용하다 보면 가끔 예상치 못한 문제에 직면할 수 있습니다. 흔히 발생하는 문제들과 그 해결 방법을 간단히 정리해 보았습니다.

코드 블록 문제 해결 가이드
문제 상황	가능한 원인	해결 방법
문법 강조가 안 됨	언어 설정 오류, CDN 링크 오류, 플러그인 비활성화	언어 설정 확인, CDN 링크 재확인, 플러그인 활성화
코드 들여쓰기가 깨짐	HTML 태그 오류, 에디터 설정 문제	<pre><code> 태그 확인, 에디터 설정 초기화
특정 언어만 강조 안 됨	해당 언어 지원 안 함, 클래스명 오타	라이브러리 지원 언어 확인, 클래스명 수정
코드 복사 시 줄 바꿈 문제	CSS 스타일 설정 오류	CSS white-space 속성 확인

6. 고급 코드 블록 활용 기법

마지막으로, 코드 블록을 더욱 효과적으로 활용할 수 있는 몇 가지 고급 기법을 소개해 드릴게요. 익혀두시면 여러분의 블로그 콘텐츠가 한층 더 전문성을 띨 것입니다.

Diff 스타일 적용: 변경된 코드를 보여줄 때 diff 스타일을 적용하면 어느 부분이 수정되었는지 명확하게 보여줄 수 있습니다.
부분 강조 기능: 특정 라인이나 단어만 강조하여 독자의 시선을 집중시킬 수 있습니다.
인라인 코드 활용: 짧은 코드 조각은 <code> 태그를 사용하여 본문 흐름 속에 자연스럽게 녹여낼 수 있습니다.
gist 연동: 깃허브의 gist를 임베드하여 긴 코드를 깔끔하게 보여줄 수 있습니다.

지금까지 티스토리 코드 블록의 기본 사용법부터 고급 활용 기법까지 자세히 알아보았습니다. 이 가이드가 여러분의 개발 블로그 운영에 조금이나마 도움이 되었기를 바랍니다. 궁금한 점이 있다면 언제든지 댓글로 질문해 주세요! 😊

자주 묻는 질문 (FAQ)

티스토리 코드 블록 사용에 대해 자주 들어오는 질문들을 모아 답변해 드립니다. 혹시 더 궁금한 점이 있다면 언제든지 댓글로 문의해 주세요!

Q: 티스토리 기본 에디터에서 코드 블록의 언어 설정은 어떻게 하나요?: A: 코드 블록을 삽입하면 상단에 언어를 선택할 수 있는 드롭다운 메뉴가 나타납니다. 여기서 원하시는 프로그래밍 언어를 선택하시면 됩니다.
Q: HTML 모드에서 코드 블록에 언어 설정을 하려면 어떻게 해야 하나요?: A: <code> 태그 내에 class="language-xxxx" 와 같은 형태로 언어 클래스를 지정해 주어야 합니다. 예를 들어 Python은 language-python 이라고 작성합니다.
Q: 코드 블록의 스타일을 변경하고 싶어요. 어떻게 해야 할까요?: A: 티스토리 스킨 편집의 CSS 메뉴에서 코드 블록 관련 스타일을 직접 수정하거나, Highlight.js나 Prism.js 같은 라이브러리의 테마 CSS 파일을 적용하는 방법이 있습니다.
Q: 긴 코드를 블로그에 넣을 때 가독성을 높이는 방법이 있을까요?: A: 핵심 코드만 발췌하여 보여주고, 전체 코드는 깃허브 gist나 별도 링크로 제공하는 것을 고려해 보세요. 또한, 코드 줄 수를 제한하거나 가로 스크롤 기능을 활성화하는 CSS 스타일을 적용하는 것도 좋은 방법입니다.
Q: 코드 블록에 복사 버튼을 추가하고 싶어요.: A: JavaScript와 CSS를 활용하여 코드 블록 옆이나 상단에 복사 버튼을 추가할 수 있습니다. 관련 튜토리얼을 검색해 보시거나, 해당 기능을 제공하는 플러그인을 활용해 보세요.

마무리하며

자, 오늘 이렇게 티스토리 코드 블록 사용법에 대한 A부터 Z까지, 정말 샅샅이 파헤쳐 봤는데요. 어떠셨나요? 이제 여러분의 개발 블로그도 훨씬 더 전문적이고 보기 좋게 변신할 준비가 되셨겠죠?

사실 저도 처음에는 코드 블록 하나 제대로 쓰는 게 왜 이렇게 어렵게 느껴졌는지 몰라요. 이것저것 눌러보고, HTML 코드도 건드려보고 하면서 지금의 노하우를 얻게 되었답니다.

여러분도 꾸준히 시도하고 적용해 보시면 분명 좋은 결과를 얻으실 수 있을 거예요!

혹시 오늘 내용 중에 헷갈리거나 더 궁금한 점이 있다면 언제든지 댓글로 편하게 질문해 주세요!

제가 아는 선에서 최대한 자세하게 답변드릴게요. 또, 여러분만의 코드 블록 활용 꿀팁이 있다면 저에게도 살짝 공유해 주시면

정말 감사하겠습니다!

그럼, 여러분의 멋진 개발 블로그를 항상 응원하며, 저는 다음에도 더 유익한 정보로 돌아오겠습니다!

예약해주니