[GitBlog] 블꾸 (4) - highlight.js로 코드블록 테마 넣기
2024, Aug 27
참고한 블로그는 여기
1. highlight.js 추가하기
아래 링크에서 Usage 부분을 참고하면 된다.
HTML Tags 추가
As HTML Tags에 있는 내용을 <head> … </head> 사이에 넣어주면 됨
head.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>-->
<script>hljs.highlightAll();</script>
2. 테마 적용
Demo에서 마음에 드는 것으로 default.min.css 부분을 바꿔준다.
- https://highlightjs.org/demo
- 난
atom-one-dark-reasonable.min.css선택
3. 줄번호 생성
highlightjs-line-numbers.js 코드 넣기
아래 링크에서 README를 참고
결론은 똑같이 <head> … </head>에 아래 코드를 넣어주면 된다.
head.html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
줄 없애는 방법
나는 이런 식으로 이상하게 줄이 생성되었다. 표로 인식해서 그런건지~
개발자 도구를 열어서 어떤 scss가 적용된건지 확인한다.
-> 나의 경우는 .c-wrap-content table 이었다. 이걸 .c-wrap-content > table 로 바꿔주면 됨
_article-page.scss
.c-wrap-content {
padding: 20px;
background-color: $white-color;
}
.c-wrap-content > table{
display: block;
margin-bottom: 1em;
width: 100%;
font-family: $base-font-family;
font-size: $base-font-size;
border-collapse: collapse;
overflow-x: auto;
& + table {
margin-top: 1em;
}
thead {
background-color: $sub-background;
border-bottom: 2px solid mix(#000, $border-color-post, 25%);
}
...
이런 식으로 바꿔주니 적용되었다.