Hodustory/프로그래밍&DB

[html/블로그 스킨관리] 코드블럭 스타일 지정 / code-pretty

호두밥 2019. 5. 1. 15:23

안녕하세요! 티스토리에 코드블럭이란 기능이 생겼더라구요.

파이썬 코드를 게시글로 올리는 저에게 매우 편한 기능이라 생각했는데;;

어떤 이유에서인지 저는 적용이 안되더라구요.

 

그래서 다른 방법을 찾아봤습니다.

 

전 코드블럭 스타일 코드를 제공하는 

code-pretty를 이용했습니다.

 

code pretty에는 총 6개의 스타일이 있는데 

여기에서 확인해보시고 원하시는 걸 선택하시면 됩니다.

 

선택하셨다면 블로그 스킨 관리 > 스킨 편집 > html로 들어가 주세요.

 

그리고 <link rel = "stylesheet" href="./style.css"> 아래에

아래의 코드에 선택한 스타일 이름을 넣은 뒤 붙여넣으면 됩니다.

 

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=선택한 스타일 이름"></script>

 

 

저장하신 다음엔 글쓰기로 들어가 코드블록을 적용해

글을 작성해 주세요.

 

 

 

 

작성하신 후 상단 메뉴바의 가장 오른쪽에 있는 기본모드를 html 모드로 바꿔 주세요.

 

그러면 작성한 게시글에 숨겨져 있던 html 코드들이 등장합니다.

코드블럭 기능을 이용해 입력한 부분은 아래와 같이 <pre> 태그로 표기됩니다.

여기서 <pre> 태그의 class를 "prettyprint"로 바꿔주세요.

 

 

이렇게 바꾼 뒤 저장하면 코드블록 부분의 스타일이 변경된 것을 확인하실 수 있습니다.

 

저는 desert 스타일을 사용했는데

너무 빡빡한 느낌이라 

글씨 크기와 여백, 줄간격을 따로 조절해주었습니다.

 

저와 같이 하실려면

블로그 관리 > 스킨 관리 > 스킨 편집 > html편집 > css 에서

아래 화면의 코드를 붙여넣어 주세요.

(클래스가 prettyprint 인 것에만 적용되는 css스타일코드입니다.)

 

.prettyprint {
	padding:20px; --내부여백
    margin:20px; --외부여백
    font-size:11pt; --글자크기
    line-height:1.5em; --줄간격
    border-radius: 10px;  --모서리 둥글게
    }

 

 

 

반응형