허니팁

티스토리 코드블럭 라인넘버 적용 방법 / < highlight.js, highlightjs-line-numbers.js, 커스터마이징 >

배기니어 2021. 1. 29. 17:34

제대로 된 첫 글을 쓰고 나서 글을 확인해 보았다.

 

- 첫 글

2021/01/28 - [프로그래밍/Python] - 파이썬 소켓 프로그래밍 / 1. 서버 프로그래밍 #1

 

파이썬 소켓 프로그래밍 / 1. 서버 프로그래밍 #1

첫 번째 프로젝트에서 안드로이드 디바이스 간 데이터 통신을 할 수 있는 앱을 구현하려고 한다. 자세한 기능은 나중에 기술하도록 하고 먼저 데이터 통신을 위한 서버를 구현하려고 한다. 학교

bagineer.tistory.com

 

그런데 코드블럭으로 작성한 부분을 보니 웬 회색 테두리가 두껍게 있고 라인넘버도 없는 것이 아니겠는가

 

오.... 너무 안이쁨

 

그래서 구글링을 통해 라인넘버를 적용해보았다.

근데 적용이 왜 적용이 안되는거죠 ㅠㅠㅠㅠㅠㅠㅠ

테두리가 문제인가 싶어 테두리 없애는 방법도 적용해봤지만 테두리만 없어졌다.

포기하려다가 마지막으로 다시 해보자 하고 도전했는데 성공!

 

그 방법을 이제 알려드리겠읍니다 천천히 따라해보세여

 

1. highlight.js 적용

 

이걸 안하고 뒤에만 해서 제가 한참 헤맸습니다....

먼저 highlightjs.org/download/에 접속해서 CDN 코드를 찾아서 복사해야 한다.

 

Getting highlight.js

Hosted A prebuilt version of highlight.js with 39 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

 

그럼 아래와 같은 html 코드가 나오는데 cdnjs와 jsdelivr 두 가지가 있다.

둘 중 아무거나 해도 된다. 저는 jsdelivr로 적용해볼게여

 

highlightjs.org/download/

 

 

 

이제 이걸 복사해서 어디에 넣느냐!

헷갈릴 수도 있으니 캡쳐해서 설명해드립니당

 

 

블로그 관리 > 꾸미기 > 스킨편집 > html 편집 > html 코드 탭 으로 들어간다.

그럼 코드가 쭉 나오는데 <head>와 </head>를 찾는다 맨 처음 작성된 부분이다.

찾았으면 </head> 바로 윗줄에 위에서 복사한 코드를 붙여넣는다.

그리고 붙여넣은 줄 바로 밑에 아래의 코드를 복사 붙여넣기 한다.

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

 

2. highlightjs-line-numbers.js 적용

 

다음으로 github.com/wcoder/highlightjs-line-numbers.js에 접속해서 CDN 코드를 찾아 복사한다.

 

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

 

잘 못찾으실 수 있으니 역시 캡쳐로 설명해드립니당 친절친절

아래로 스크롤하시다 보면 이런거 찾으실 수 있어요 저는 마찬가지로 jsdelivr를 적용할게여

둘 중 아래의 코드를 복사한다.

 

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

 

복사한 코드를 아까 붙여넣기 했던 블로그 관리 > 꾸미기 > 스킨편집 > html 편집 > html 코드 탭에서

다시 </head> 윗 줄에 붙여넣는다. 그리고 아래의 코드를 바로 밑에 붙여넣는다.

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

 

정리하자면 코드를 다음과 같이 추가하면 된다.

<head>
	.
	.
	.
    
	<!-- 라인 넘버 -->
	<link rel="stylesheet"
				href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>
	
	<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
	<script>hljs.initLineNumbersOnLoad();</script>
</head>

 

그리고 오른쪽 상단의 적용을 누른다. 그럼 일단 코드라인 넘버 적용은 완료!

그런데 문제가 있다. 블로그 스킨에 따라 적용이 되지 않거나 이상하게 적용이 될 수 있다.

 

※ 스킨에 따라서는 라인 넘버가 적용되지 않는 경우도 있다고 합니다 ※

※ 이 점 참고하셔서 위의 방법으로 적용이 안되면 스킨을 바꿔보세여 ※

 

3. 문제 해결

 

간혹 블로그 스킨에 따라 라인넘버를 적용하면 코드블럭이 테이블처럼 나오는 경우가 있다.

이렇게 ...

 

이 문제는 블로그 관리 > 꾸미기 > 스킨편집 > html 편집 > CSS 코드 탭 에서 해결할 수 있다.

스크립트 내에서 Ctrl+F로 table을 검색하다보면 아래와 같은 코드를 찾을 수 있다.

.entry-content table {
	width:100%;
	margin-bottom: 22px;
	border: 1px solid #e6e6e6;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.9375em;
	line-height: 1.5714;
	color: #666;
}
.entry-content table thead th {
	padding:7px 0 11px;
	border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
	padding:7px 0 11px;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
}

 

이런 코드가 없으시다구요? 그럼 혹시 이런 코드가 있는지 확인해보세요

.article-view table {
    border: 1px solid #dadce0;
    border-collapse: collapse;
}

.article-view table thead tr {
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
    color: #000;
}

.article-view table tr th,
.article-view table tr td {
    padding: 7px;
    border-left: 1px solid #dadce0;
}

.article-view table tr {
    border-bottom: 1px solid #dadce0;
}

 

만약 이런 코드를 찾으셨다면 table마다 앞에 '>'를 추가하면 됩니당

그럼 다음 둘 중 하나로 수정될 수 있겠죠?

/* case #1. entry-content */
.entry-content > table {
	width:100%;
	margin-bottom: 22px;
	border: 1px solid #e6e6e6;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.9375em;
	line-height: 1.5714;
	color: #666;
}
.entry-content > table thead th {
	padding:7px 0 11px;
	border-left: 1px solid #e6e6e6;
}
.entry-content > table tbody td {
	padding:7px 0 11px;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
}
/* case #2. article-view */
.article-view > table {
    border: 1px solid #dadce0;
    border-collapse: collapse;
}

.article-view > table thead tr {
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
    color: #000;
}

.article-view > table tr th,
.article-view > table tr td {
    padding: 7px;
    border-left: 1px solid #dadce0;
}

.article-view > table tr {
    border-bottom: 1px solid #dadce0;
}

 

짠 그럼 다음과 같이 라인넘버 적용이 된 것을 보실 수 있습니당

 

그러나 역시 안이쁨

근데 뭔가 좀 아쉽지 않나여

위의 깃헙 링크에 가보면 스타일 가이드가 있는데 거기서 저는 좀 추가 수정을 했습니당

/* for block of numbers */
.hljs-ln-numbers {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	text-align: center;
	color: #f09;
	border-right: 0px solid #CCC;
	vertical-align: bottom;
	padding-right: 50px;
	font-size: 12px;
	width: 15px;

	/* your custom style here */
}

/* your custom style here */
.hljs-ln td.hljs-ln-code {
	padding-left: 10px;
	line-height: 1.5;
}

/* for block of code */
.hljs-ln-code {
	vertical-align: center;
	padding-left: 50px;
	font-size: 13px;
}

 

결과는 다음과 같다.

 

깔끔

하지만 저 회색 테두리가 맘에 안들어서 CSS에서 다음과 같이 padding을 0으로 수정하면 완료!

.article-view pre {
    padding: 0px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
    color: rgba(34, 85, 51, 0.87);
    white-space: pre-wrap;
}

 

그리고 코드블럭 모서리를 둥글게 하기 위해서 CSS 코드 탭에서 code를 찾아 border-radius: 10px;를 입력해주면 끝

값은 원하는대로 설정하시면 됩니당

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
	border-radius: 10px;
}

 

이제 적용만 누르면 완성!

 

휴.. 힘들다.....

'허니팁' 카테고리의 다른 글

티스토리 프로필 사진 모양 수정 / CSS  (0) 2021.08.21
티스토리 사진 테두리 적용 / imageblock  (0) 2021.01.30

'허니팁'의 다른글

  • 현재글티스토리 코드블럭 라인넘버 적용 방법 / < highlight.js, highlightjs-line-numbers.js, 커스터마이징 >

관련글

댓글

티스토리툴바