본문 바로가기
지식산업

티스토리 코드 블록 적용하기

by 내친구지혜 2025. 3. 5.

코드 블록은 블로그나 문서에서 프로그래밍 코드나 명령어 같은 기술적인 텍스트를 일반 텍스트와 구분해서 보여주는 특별한 형식입니다.

코드 블록의 특징:


1. 시각적 구분: 일반 텍스트와 다른 배경색, 글꼴, 테두리 등으로 구분되어 보입니다.

2. 서식 유지: 들여쓰기, 공백, 줄바꿈 등 코드의 원래 형식이 그대로 유지됩니다.

3. 구문 강조(Syntax highlighting): 많은 플랫폼에서는 프로그래밍 언어에 맞게 키워드, 변수, 문자열 등을 다른 색상으로 표시해줍니다.

티스토리에서 코드 블록을 만드는 방법:


1. 에디터 기능 사용:
   - 티스토리 에디터에는 코드 블록 삽입 버튼이 있습니다 (</> 아이콘처럼 생긴 버튼).
   - 이 버튼을 클릭하면 코드를 입력할 수 있는 특별한 영역이 생성됩니다.

2. HTML 직접 사용:
   ```
   <pre><code>
   여기에 코드를 입력합니다.
   function example() {
     console.log("Hello World");
   }
   </code></pre>
   ```

3. 마크다운 사용 (티스토리가 마크다운을 지원하는 경우):
   - 백틱(`) 세 개로 코드 블록을 시작하고 끝냅니다.
   - 시작 부분에 언어 이름을 지정하면 해당 언어에 맞는 구문 강조가 적용됩니다.

코드 블록을 사용하면 독자들이 코드를 더 쉽게 읽고 이해할 수 있으며, 복사해서 사용하기도 편리합니다.


반응형