반응형
1. 아래 링크에서 사용하기 원하는 테마 확인하기
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
2. 티스토리 html편집기 들어간다.
3. <head>와 </head> 사이 아무대나 아래 줄을 추가한다.
그리고 아래 "테마이름" 에다가 위에서 고른 테마 이름을 넣는다.
단, 모든 문자는 소문자로 한다. 띄어쓰기는 "-"로 대체한다.
<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/테마이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad(); $(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); }); </script>
<!-- 코드블럭 글씨 크기 -->
<style> pre > code {font-size: 13.5px;} </style>
그러면 코드블럭 테마가 변경됨.
반응형
참고링크
https://july7k.tistory.com/161
[티스토리 꾸미기] 코드 블럭 변경(테마 적용, 글씨체, 글씨 크기)
티스토리에 '코드 블럭' 이라는 기능이 참 좋다고 생각하는데, 기본 테마는 가독성이 떨어진다는 단점이 있다. 그래서 찾아본 방법! 1. 간단하게 바꾸고 싶다 - 플러그인 적용 티스토리 관리자
july7k.tistory.com
반응형
'웹페이지 관련' 카테고리의 다른 글
| [Wordpress] 워드프레스 웹쇼핑몰(E-commerce) 우커머스(Woocommerse)로 무료 템플릿 불러오기 (0) | 2021.10.24 |
|---|---|
| 무료 홈페이지 제작 서비스 제공 "바른web" 개인, 작은 비즈니스 운영 웹사이트 (0) | 2021.09.22 |
| [CentOS 7] 인터넷 URL 웹 도메인 이름 입력시 작동과정 (도메인 서버 구조, 도메인 서버 원리) (0) | 2021.09.13 |
| [Tistory] 티스토리 본문 (메인 페이지) 폭 늘리기 줄이기 (0) | 2021.09.12 |
| [Tistory] 티스토리 사이드바 타이틀 표제 두껍게 하기 (0) | 2021.09.12 |