티스토리 코드블럭 꾸미기

2020. 5. 9. 01:37

> 사용법

> 적용법

(티스토리 플러그인 사용해도 되지만 좌측 라인넘버라던가 뭔가 불편해서 직접 CDN 적용)

> 전체 드래그해서 복붙

<!-- 색상 등 css파일  -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/styles/atelier-dune-dark.min.css">

<!-- 하이라이트 적용  -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<!-- 코드 줄 번호 적용  -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

<!-- 코드 블럭 내 폰트 [종류] 및 [폰트크기] 변경  -->
<link href='https://fonts.googleapis.com/css?family=Fira Mono' rel='stylesheet'>
<style>
    pre>code {
        font-family: 'Fira Mono' !important; 
        font-size: 14px !important;
    }
</style>