728x90
블로그 이사했습니다!
👇 블로그 이전 공지 👇
👇 새 블로그 보러가기 👇
Win Record — Win Record (tistory.com)
Win Record
201 Created!
win-record.tistory.com
코드블럭 하이라이트(글자색) 적용
highlight.js 다운로드하여 사용하는 방법
- 다운로드
- 테마 고르기
- 티스토리테마 적용 a. 파일 추가.zip 파일 중 highlight.pack.js와 styles>androidstudio.css 추가
(HTML 탭> '<head></head>' 사이) <!--코드 하이라이트--> <link href="./images/androidstudio.css" rel="stylesheet" type="text/css"> <script src="./images/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script src="./images/highlight.pack.js"></script>- b. 코드 적용
- (블로그관리>꾸미기>스킨편집>html편집>파일업로드 탭)
코드블럭 라인넘버 적용
highlightjs-line-numbers.js 다운로드하여 사용하는 방법
- 다운로드
- 티스토리 테마 적용 a. 파일 추가.zip파일 중 highlightjs-line-numbers.js 추가
(HTML 탭> '<head></head>' 사이)
(CSS 탭 아무 곳이나)/* for block of numbers */ .hljs-ln-numbers { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #ccc; border-right: 1px solid #CCC; vertical-align: top; padding-right: 10px !important; padding-left: 5px; /* your custom style here */ width: 30px; } /* for block of code */ .hljs-ln-code { padding-left: 10px !important; }
- table 이 있는 모든 부분 수정 (표스타일로 정했을 때만 표로 보이게)
수정 전에는 '>'가 없었음 <!--예시--> .another_category > table { width: 100%; border-collapse: collapse; border: 0 !important; font-size: 0.9375em; color: #666; } .another_category > table th { padding: 8px 0 4px; border: 0 !important; text-align: left; font-weight: 400; } .another_category > table th a { text-decoration: none; color: #666; }- - 넘버라인 관련 코드 추가
<!--코드 라인 넘버--> <script src="./images/highlightjs-line-numbers.js"> </script> <link rel="stylesheet" href="./images/androidstudio.css" /> <script> hljs.initLineNumbersOnLoad(); $(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); }); </script>- b. 코드 적용
- (블로그관리>꾸미기>스킨편집>html편집>파일업로드 탭)
코드블럭 가로 스크롤
(CSS탭 아무 곳이나)
.hljs {
white-space: pre;
overflow-x: auto;
}
코드블럭 글꼴 지정
(CSS탭 아무 곳이나)
/* 코드용 폰트*/
pre > code {
font-family: "Consolas", "Sans Mono", "Courier", monospace;
}
참고자료
티스토리 코드 하이라이트(highlight.js, line number, 폰트 적용하기) (tistory.com)
[티스토리] 코드블럭 글꼴, 스타일 설정 / 라인넘버 표처럼 안 나오게 설정 (tistory.com)
[ETC] 티스토리 코드 하이라이트 (tistory.com)
티스토리 코드블럭 활용하기 - 2 (tistory.com)
코딩하기 편한 폰트는 무엇일까? (brunch.co.kr)
공부하며 정리한 글입니다. 내용에 대한 피드백은 언제나 환영입니다.
댓글