[HTML/CSS] 코드블럭 스타일 수정하기 / highlight

해당 내용은 반응형2 스킨에 적합합니다.
다른 스킨에 적용할 경우 CSS 커스텀이 따로 필요하니 참고바랍니다.

 

✔️ 경로

블로그관리  >  스킨편집  >  HTML

 

✔️ 코드 붙여넣기

<!--Highlighter-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/atom-one-dark-reasonable.min.css">
<script>hljs.initHighlightingOnLoad();</script>

해당 테마는 현재 블로그에 적용되어있는 테마이다.

더 많은 테마들을 보고싶다면 아래 데모 링크로 들어가서 확인후 atom-one-dark-reasonable 부분을 원하는 테마의 이름으로 바꿔주면 된다.

 

highlight.js demo

highlight.js

 

✔️ CSS 수정하기

✔️ [반응형2 스킨 예시] 다른 스킨은 별도 커스텀이 필요하다. CSS에서 'code' 나 'pre' 키워드로 검색한후 조정해주면 된다.

 

아래 예시와 같이 해당 코드들을 수정해줘야 보기 예쁘게 적용된다.

수정해주지 않아도 괜찮지만 투박한 검은 박스처럼 보여서... 사용자 취향대로 수정해주면 된다.

.area_view code { font-family: Consolas, Sans Mono, Courier,monospace; }
.area_view code { padding:2px 5px; border-radius:10px; margin:0 2px; border:10px solid #282C34 }
.area_view pre { color:#555; background-color:#F6F7F8; margin:28px auto; word-wrap: break-word; font-family: Menlo,Consolas,Monaco,monospace; font-size:14px; line-height:20px; overflow-x:auto; }
.area_view pre code.hljs { padding: 9px; }