내 작은 서재/작은 서랍

티스토리 코드블럭 테마 & 라인 넘버 설정(두 자리 수 따로 나오는 문제 해결)

Do아 2021. 6. 9. 14:10
728x90

 

2021/06/08(화)

 

코드블럭을 플러그인을 적용해서 만들 수 있지만 별로 안예뻐서 테마를 적용시키고

보기 쉽게 라인넘버를 설정해보도록 하겠다.

 

 

 

우선, 테마를 가져와보도록 하자

https://highlightjs.org/download/

 

Getting highlight.js

Hosted A prebuilt version of highlight.js with 34 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig

highlightjs.org

 

 

 

위에 사이트에 들어가서 cdnjs 코드를 가져왔다

 

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>

 

블로그 관리 --> 스킨편집 --> html편집 --> html

 

<head> ~ </head> 사이에 넣어준다

 

밑에 추가!

<script> hljs.initHighlightingOnLoad();</script>

 

 

이런식으로 <head>안에 넣어주고 적용 시키면 되는데 원하는 테마를 선택해서 적용해보자!

 

https://highlightjs.org/static/demo/

 

highlight.js demo

 

highlightjs.org

위에 홈페이지에 들어가서 원하는 테마를 고르고 

대문자는 --> 소문자로 

띄어쓰기는 --> "-" 하이픈으로 변경하여 입력

 

 

이 블로그는 zenburn 테마를 적용함

아래 사진에 밑줄친 부분만 원하는 테마이름으로 바꿔주면 됌

적용을 누르면 아래와 같이 완성.

 

 

 

이제 보기 쉽게하기 위해 코드 블럭에 번호를 넣어보자

 

먼저, 해당 주소가 go go

https://github.com/wcoder/highlightjs-line-numbers.js

 

wcoder/highlightjs-line-numbers.js

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

 

 

아래로 내리다보면 CDN을 볼 수 있음

위에서 cdnjs를 가져왔기 때문에 cdnjs 한줄을 그대로 복사 

 

 

 

블로그 관리 --> 스킨편집 --> html편집 --> html

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

위의 코드를 <head> 안에 넣어주기

 

 

이런식으로 나오게되는데 수정을 해줘본다

 

 

 

블로그 관리 --> 스킨편집 --> html편집 --> css

아래와 같은 코드를 볼 수 있을 것이다

table 앞에 > 를 붙여주자

 

이렇게

 

적용을 하면 아래같이 나오는데 이상하다;; 

왜 두자리수부터 이상하게 나오는거지...

 

 

 

 

수정

구글링을 못하는건지 찾아도 안나와서 그냥 자체적으로 고쳐봤다 ㅎ..

내 블로그에서 개발자 모드(F12)를 눌러서 확인을 했는데 

아래 .contents_style table td안에 word-break: break-word;를 끄면 제대로 나오는 것을 확인했다

 

그래서 css에서 확인했는데 저 .contetns_style table td 스타일이 없는 것이아닌가!!

그. 래. 서 그냥 html에서 덮어씌워주기로 결정 ㅎㅎ

 

 

 

블로그 관리 --> 스킨편집 --> html편집 --> html

아래 코드 <head>안에 삽입

<style>
		.contents_style table td {
    word-break:keep-all;
		}
</style>

 

 

적용하고 본인 블로그를 새로고침해서 확인하면 됐다~!! 무야호🤩

 

 

최종 html 수정화면

<head> ~ </head> 사이에 삽입

<!-- 테마적용 -->
<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<script> hljs.initHighlightingOnLoad();</script>
	
<!-- 라인넘버-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>  

<!-- 라인 스타일 주기-->
<style>
.hljs-ln-n:before {
    content: attr(data-line-number);
		color: gray;
		letter-spacing: 2px;
	 	line-height: 19px;
}
</style>

 

<body> 안에 </body> 끝나기 직전에 삽입

<!-- 백그라운드 변경 -->
<style>
	.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: #383a42;
    background: #e6e5e587;
}
</style>

 

728x90