26_highlightjs

티스토리에 소스 코드 하이라이터 적용하기.

Syntax Highlighter가 요즘 안되네요..? 제가 못하는건지..

그래서 또 다른 하이라이터 highlightjs로 적용합니다.

개인적으로는 이게 더 예쁜 것 같네요.

 

소스 하이라이터 적용

 

설정 - HTML/CSS 편집 들어갑니다.

HTML 누릅니다.

역시 수 많은 코드들이 있지만 당황하지 않고,

</head>를 찾습니다. (Ctrl + F 하세욤)

</head> 위에 아래의 코드( 3줄, </head>는 제외 ) 붙여넣기 후 저장해욤

편집은 끝 입니다.

                                                                                                         ※ 아래는 예시입니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/mono-blue.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>

 

 

코드를 예쁘게 할 때!!

글 작성 -  HTML 편집기에서 <PRE><CODE> </CODE></PRE>안에 코드를 작성하세요. ( 아래 보이는 것처럼 )

테마 편집

 

https://highlightjs.org/static/demo/       접속하세욤

     

왼쪽 측면의 목록에서

마음에 드는 테마를 고르세요.

언어를 선택하고 테마를 고르거나,

테마를 고르고 언어가 어떻게 나오는지 보세요.

예쁜 테마를 골랐으면,

이름을 복사하고, HTML/CSS편집에서의 빨간 글씨 부분을 수정하면 됩니당

.min 부분은 꼭 있어야 하는 부분입니다. 삭제하지 마세요.

 

※ 아래는 예시입니다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/mono-blue.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

저는 현재 mono-blue로 해놨어욤.

처음에는 Default로 되어있을거에욤.