티스토리 코드블럭

티스토리 코드블럭 설정

이제 블로그에 본격적으로 정리하기 위해서 코드블럭을 예쁘게 정리하는 방법을 알아봤다.

여러 블로그를 찾아본 결과

나처럼 헤맬 사람들이 있을 것 같아서 정리해보겠다.

---

+) 2021.06

이번에 다시 글들을 보니 코드블럭이 제대로 표현이 안되길래 나도 이 글을 다시보고 따라했는데 잘 안되서 찾아봤다.

근데 저번엔 관리 -> 플러그인 -> 코드 문법 강조 쳐서 설정하면 잘 안됐는데 이젠 된다. 다들 쉽게 하세요~~

 

검색에 코드만 쳐도 나옴

 

 

 

테마 골라서 쓰면 끝~ 난 왜 고생을 했는가 ~~~

밑에는 위의 방법이 안될 시 도전해보세용

---

코드에 하아라이트를 넣어 예쁘게 하고 싶다면!

highlight.js를 써보자자.

 

1. 다운로드하자

highlightjs.org/

highlight.js

사이트에 방문해서 다운을 한다. 편히 받고 싶다면 밑에 zip을 다운로드하면 된다.

highlight.zip

0.26MB

 

 

2. 코드에 숫자를 넣기 위해 코드 하이라이트 라인 다운로드하자

highlightjs-line-numbers.js

0.01MB

코드에 번호를 넣기 위한 파일이다. 이 부분에서 요상하게 나와서 밑에서 자세히 다뤄보겠다.

 

 

 

3. 티스토리 스킨 편집에 들어가자

 

티스토리 관리자 -> 꾸미기 -> 스킨 편집

html 편집이 보일 거다

들어가서  아까 다운로드한 파일 업로드를 한다. zip 파일에 있는 모든 것을!

※주의할 점은

(지금 내가 쓰는 노트북이 리눅스라서 파일이 안 떠서 캡처는 없지만)

highlight zip 파일에 style파일이 있을 텐데 이 파일을 안에 들어가서 나머지 이미지 다 올려야 한다. 그래야 원하는 스타일 사용 가능!

그리고 압축 풀고 넣어야 들어갑니둥

 

highlight.js-line-number.js파일도 넣어주자~~~

 

 

 

4.HTML수정

일단 아까 HTML수정 창에서 html로 넘어간다

그럼 이런 창이 뜰 텐데

html 수정창

 

</head>를 찾고 난 저기 위치지만 각자 다를 것이다.

 

그 위에 아래 코드를 넣자

<!-- 코드 하이라이트 -->
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/atelier-forest-dark.css">
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script>hljs.initLineNumbersOnLoad({
singleLine: true
});
</script>

여기서 말입니다..

스타일을 바꾸고 싶다? 3번째 줄

atelier-forest-dark.css 이 부분을 수정하자!

원하는 스타일로

스타일이 뭐 있는지 궁금하다?

 

highlightjs.org/static/demo/

 

여기 들어가면 데모로 확인 가능~~

보고 맘에 드는 애로 이름 변경하면 끝!

이름은 근데 다 소문자로 써야 하고 띄어쓰기는 '-'로 해야 한다.

무슨 말인지 모르겠다? 예시를 남기겠다.

(ex) tomorrow-night-bright.css

 

 

그럼 따란~ 하고 난 예쁘게 변할 줄 알았다..

왜냐 다른 블로그는 그랬으니까..^^

다들 코드 블록 쓰는 법은 알고 있다고 넘어가겠다.

그냥 글 쓸 때 맨 위에 점 ... 3개 이거 누르면 뜬다. 매우 쉽다.

코드 블록 누르고 코드 넣으면 그냥 끝난다. 박수~~

지금 A-Z 다 알려주는 중

 

but

다시 이것만 해서 되는 사람이 있고 안 되는 사람이 있을 거다.

난 항상 뭘 하면 안 되는 쪽 사람이라 많은 서치가 필요하다,,ㅜㅜ

 

된 사람은 안 해도 되고 안된 사람은 여기 붙어라 ㅎ

 

5. 안된 자들의 모임,,

자 했는데 라인이 막 이상하게 표로 나왔다?

나랑 비슷한 고통을 겪는 자들인 거다. 선택받은 거예요 여러분 ㅠㅜ

안 되는 이유가 안되는 스킨이어서라는데

내 취향이 저런 걸 어떡하냐 말인가

 

안되면 되게 하라~

 

css창으로 갈 거다.

css

여기다 이 코드 추가할 거다.

/* 라인넘버 추가 */
.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: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px !important;
}
.hljs-ln-code {
padding-left: 10px !important;
}

그리고 끝난 게 아니다..

 

쭉쭉 창을 내려봐라

한 1600번 줄까지,,

그리고 ctrl+f 찾자 뭐를?

table을 찾아라

원래는 ' > ' 가 없었을 것이다.

나처럼 추가해라 그러면

표처럼 라인 넘버가 나오는 그런 슬픈 일이 없어지고 예쁘게 나오게 된다.

 

+망한 버전 모습

표처럼 적힌 코드,,망함

 

 

 

 

 

사담)

처음 블로그 하는데 많관부~~