티스토리에서 프로그래밍 언어라던지 html 등을 본문에 작성할 때 유용하게 사용할 수 있는 기능인 코드블럭
이 코드블럭이 너무 예쁘지 않아서 이번에 여러 블로그 글들을 참고해서 수정하였습니다.
현재 제 블로그에 적용된 코드블럭 소스입니다.
<!-- syntax highlight -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/rainbow.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Gogle Font for syntax highlight -->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<style>
pre, code {
font-family: 'Source Code Pro';
line-height: 1.5;padding: 0px;font-size: 15px;
}
</style>
제가 사용하고 있는 코드블럭을 그대로 사용하실 분은 위 내용을 복사한 다음 [블로그 관리] - [스킨 편집] - HTML 로 가셔서 <head> </head> 태그 내에 붙여 넣으시면 됩니다.
highlight.js
highlightjs.org
다른 스타일로 바꾸고 싶을 경우
다른 스타일을 원하시는 분은 상기 사이트에서 본인 마음에 드는 스타일을 선택합니다.
아래 화면의 style:rainbow 를 클릭하시면 다른 style 로 변경됩니다.
style 을 선택하셨다면 head 태그에 붙였던 소스 중 style 명칭 부분을 본인이 선택한 style 로 변경해 주시면 됩니다.
폰트 변경 방법
폰트는 무료 폰트인 구글 폰트를 이용하였습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트 사이트에 가시면 많은 폰트를 볼 수 있는데요.
마음에 드는 폰트를 클릭하시면 상세 페이지로 들어갑니다.
+Select this style 을 클릭하시면 우측에 창이 나오는데, 거기서 Embed 를 클릭하시면 Source Code 를 확인할 수 있습니다.
<!-- Gogle Font for syntax highlight -->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
폰트의 크기가 너무 커서 저는 추가로 아래와 같이 사이즈도 조절해 주었습니다.
<style>
pre, code {
font-family: 'Source Code Pro';
line-height: 1.5;padding: 0px;font-size: 15px;
}
</style>
제가 구글 크롬 브라우저를 사용해서 몰랐는데,
인터넷 익스플로러에서는 정상적으로 표출이 되지 않는 문제가 있네요...
참고한 블로그 글
https://donologue.tistory.com/366
https://www.jbfactory.net/12748
그럼 오늘도 좋은 하루 되세요.
♥읽어주셔서 감사합니다♥
티스토리 댓글과 공감♥은 로그인이 필요 없습니다.
로그인하시면 구독 가능합니다.
'IT 이야기 > 티스토리' 카테고리의 다른 글
| 티스토리 댓글&방명록 스팸 광고 차단 방법 (50) | 2021.12.16 |
|---|---|
| 블로그 수익을 올리는 쿠팡 파트너스 하는 법과 수익 공개 / 저품질 피하는 법 (88) | 2021.12.09 |
| [티스토리] 공감버튼 하트 콩닥콩닥 움직임 연출(css) (8) | 2020.12.06 |
| [티스토리] 수익 메뉴 개편 후 오디세이 스킨 변경한 이유 (feat. STARCUBE) (22) | 2020.11.18 |
| [구글 애드센스 ] 티스토리 블로그를 통한 첫 외화벌이 달성! (14) | 2020.09.25 |
| [Tistory] 리디바탕체 적용_Poster Skin (10) | 2020.09.11 |
| 구글 애드센스 PIN 번호 대체 오긴 오는 걸까? (4) | 2011.11.18 |
| 티스토리 초대장 배포합니다.(마감) (36) | 2011.08.30 |
