ENG 데브로그

2021.07.27 - [정리/팃토리업뎃로그] - 코드블럭 하이라이트 업뎃 예정

이전의 코드블럭 업뎃 예정 포스팅에서,,

플러그인에 숟가락 얹어보려던 꼼수가 안통해서ㅋㅋㅎㅎ

플러그인 해제하고 html, css 편집해서 코드블럭을 업데이트했다.

원래 하려던 코드블럭 하이라이트 뿐만 아니라

라인 넘버, 폰트까지 업데이트했다.ㅎㅎ 짱!

하이라이트 적용)

일단 아래 사이트에서 가장 맘에드는 테마를 고르고

https://highlightjs.org/

티스토리 관리-꾸미기-스킨 편집-html 편집창에서

< html탭 >

상단에 아래 코드 입력!

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/styles/atom-one-dark-reasonable.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.1/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

나는 일단 atom one dark reasonable 테마가 맘에 들어서 선택했는데

다른 테마가 맘에들면 나중에 이부분만 수정해 주면 될 것 같다.

라인넘버 적용)

< html탭 >

하이라이트 아래에 입력!

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

< css탭 >

css 탭 하단에 아래 코드 입력!

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

폰트 적용)

폰트는 아래 사이트에서 가장 맘에드는 폰트를 골라서

https://fonts.google.com/

< html탭 >

라인넘버 아래에 입력!

<link href='https://fonts.googleapis.com/css?family=Overpass Mono' rel='stylesheet'>
<style>
    pre>code {
        font-family: 'Overpass Mono' !important; 
        font-size: 14px !important;
    }
</style>

< 최종 html 탭 화면코드 >

< 최종 css 탭 화면코드 >

음~~ 업뎃 된 코드블럭 아름답다!