티스토리 블로그 소스코드 넣는 방법

2025. 5. 19. 06:33알아두면 유용한

728x90
728x90
LIST

728x90

🧩 1. 기본 코드블럭 기능 사용하기

 

티스토리의 기본 에디터에서는 코드블럭 기능을 제공하여 간단하게 소스코드를 삽입할 수 있습니다. 

 

사용 방법:

1. 글쓰기 에디터에서 상단의 **더보기 메뉴(···)**를 클릭합니다.

2. 코드블럭을 선택합니다.

3. 프로그래밍 언어를 선택한 후, 소스코드를 입력하고 확인을 클릭합니다. 

 

지원하는 언어에는 HTML, CSS, JavaScript, Python, Java, C++, Kotlin, Swift, PHP, Go, C#, SQL 등이 포함됩니다.  

 

 

🎨 2. 코드 문법 강조 플러그인 활용하기

 

더 나은 가독성을 위해 티스토리에서 제공하는 코드 문법 강조 플러그인을 사용할 수 있습니다. 

 

설정 방법:

1. 블로그 관리 페이지로 이동합니다.

2. 좌측 메뉴에서 플러그인을 선택합니다.

3. 코드 문법 강조 플러그인을 찾아 활성화합니다.

4. 원하는 테마를 선택하여 적용합니다.  

 

이 플러그인을 통해 다양한 테마를 적용하여 코드의 가독성을 높일 수 있습니다.  

 

 

🛠️ 3. 고급 사용자: Highlight.js로 커스터마이징

 

더 세밀한 커스터마이징을 원한다면, Highlight.js를 활용하여 코드블럭을 꾸밀 수 있습니다. 

 

설정 절차:

1. Highlight.js 공식 사이트에서 원하는 언어와 테마를 선택하여 파일을 다운로드합니다.

2. 티스토리 스킨 편집 > HTML 편집으로 이동합니다.

3. <head> 태그 내에 다음 코드를 삽입합니다: 

 

<!-- Syntax Highlighter -->

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/vs2015.min.css">

<script>hljs.initHighlightingOnLoad();</script>

<!-- Line Number 적용 -->

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>

<script>hljs.initLineNumbersOnLoad();</script>

 

2025.04.15 - [상품리뷰 + 다양한리뷰] - 25년 태블릿 종류와 가격

 

25년 태블릿 종류와 가격

2025년 현재 국내에서 인기 있는 태블릿 종류와 가격대를 용도별로 정리해드리겠습니다. 각 제품은 성능, 가격, 활용도에 따라 다양하게 선택할 수 있습니다. 📱 프리미엄 태블릿 (고성능 작업용

brandella.tistory.com

2025.04.08 - [알아두면 유용한] - 지브리 만화 사진의 모든 것

 

지브리 만화 사진의 모든 것

지브리 만화 사진의 모든 것  스튜디오 지브리는 세계적으로 유명한 애니메이션 제작사로, 독특한 그림체와 따뜻한 색감이 특징입니다. 특히, 지브리 애니메이션의 감성적인 장면들은 많은 사

brandella.tistory.com

 

 

이렇게 설정하면 코드블럭에 줄번호를 추가하고, 원하는 테마를 적용할 수 있습니다.  

 

 

🧪 4. 외부 도구: Color Scripter 활용하기

 

코드를 더 아름답게 표현하고 싶다면, Color Scripter와 같은 외부 도구를 사용할 수 있습니다. 

 

사용 방법:

1. Color Scripter에 접속합니다.

2. 코드를 입력하고, 원하는 스타일을 선택합니다.

3. 생성된 HTML 코드를 복사하여 티스토리 글쓰기 에디터의 HTML 모드에서 붙여넣습니다.  

 

이 방법을 통해 다양한 언어와 스타일로 코드를 표현할 수 있습니다.  

 

 

🧵 5. 인라인 코드: 백틱(`) 사용하기

 

간단한 코드나 명령어를 강조하고 싶을 때는 **백틱(`)**을 사용하여 인라인 코드를 표현할 수 있습니다. 

 

사용 방법:

1. 글쓰기 에디터에서 마크다운 모드로 전환합니다.

2. 강조하고 싶은 코드를 백틱으로 감싸서 입력합니다. 예: `코드`

3. 다시 기본 모드로 전환하여 확인합니다.

 

IT 강국인 시대에 필수로 알아야 할 정보 모음했습니다. 

 

도움이 되고, 유익한 시간이 되길 바랍니다. 

 

늘 찾아주시는 이웃분들께 감사의 말을 전하는 바입니다.

 

감사합니다. 좋은 하루 되세요. 굿럭. 

728x90
728x90
LIST