본문 바로가기

카테고리 없음

보기좋게 쉽게 티스토리 코드 블럭 꾸미기 꿀팁~!

반응형

1. 블로그 설정 > 플러그인 > syntax 검색 > Syntax Highlight 플러그인 활성화 

글쓰기시 코드블록 선택함
코드를 복사하여 코드블록에 넣기

2. 원하는 글씨체로 변경, header에 소스 추가

1> 아래 사이트에서 원하는 글씨체를 찾습니다.

예로 Atom One Dark Reasonable를 선택하겠습니다.

참조 사이트:
https://highlightjs.org/

2> header에 추가할 소스를 준비합니다.

아래 부분을 사용하는데 특정 부분(보라색 글씨)을 원하는 글씨체로 수정하여 사용해야 됩니다.

수정전
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>

수정후
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/Atom-One-Dark- Reasonable.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>

참조 사이트:
https://highlightjs.org/static/demo/

소스적용하는 방법
블로그 관리 > 스킨 편집 > html 편집 >  </head>위에 바로 붙여넣기  > 적용

3. 코드 자동정렬, 탭간격 조절

https://alikong.tistory.com/38

4. 언어 표기 및 줄바꿈 기능 

https://alikong.tistory.com/39

5. whatever 스킨 홈버튼, 방명록 버트 위치 변경

https://wonderbout.tistory.com/83

 

 

반응형

]