tstory 시작.... 코드라인 꾸미기 수정 1차..

류쌤과의 내기겸 내자신을 위해서 블로그를 다시 시작......

기존에 손대다 방치하게된 네이버 블로그도 있지만, 마크다운도 적용되고 좀 더 전문적인 느낌의 티스토리를 사용하기로 결정했다.

네이버 블로그랑 다른 구조가 아직 낯설고 불편하지만 적응되면 익숙해지겠지......

신기한건 html과 css를 내가 직접 손보는게 가능해서 개인의 역량에 따라 블로그의 디자인부터 구조 기능이 완전 달라질 수 있다는 점....

하지만 아직은 너무 많은걸 건들이고 싶지는 않다.

그럼에도 불구하고, 코드 블록이 너무 마음에 안들어서 구글링을 통해서 좀 바꿔봤다.

까먹을 수 있으니 그 방법을 기록하자.......

1. 플러그인을 통해서 바꾼다.

다만 종류가 한정적이고 디테일에 대한 설명이 부족.....

2. 직접 highlight.js를 이용

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

https://highlightjs.org/download/

위 주소로부터 cdn을 가져온다. 코드블록을 복사해도 댐........

 

#### 마지막 한줄 코드도 해줘야 함!!! 궁금한건 링크 cdn에는 없음... 

여기서 중요한 것은 버전 체크를 하자. 최신버전이 아니면 테마가 적용안되기도 한다. -> 버전 달라도 되더라........

3. 테마를 고르자

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

위 주소로부터 마음에 든 테마를 고르자

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

위의 default 자리에 마음에 드는 테마를 적용한다.

이때 대문자는 소문자로!!!!!! 띄어쓰기는 -로 대체한다.

Gradient-Dark가 마음에 든다면

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/gradient-dark.min.css">

이렇게 바꿔주면 된다.

4. 코드넘버 line number 설정

<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
	$(document).ready(function() {
		$('code.hljs').each(function(i, block) {
		hljs.lineNumbersBlock(block);
		});
	});
</script>

삽입한다.

 

추가적으로 파일업로드에 highlightjs-line-numbers 파일 추가 해야 함!!! 두번째 링크 블로그 참고....

5. 디테일 설정

보기처럼 따라할 경우, 라인넘버와 코드간 간격이 안맞거나 무언가 심히 거슬리고 안예쁘다. 이를 해결하는 방법

css탭에 다음과 같은 코드를 넣어라

.hljs {
    white-space: pre;
    max-width:850px; 
    max-height:500px; 
    overflow:auto !important; /* scroll setting */
}

/* 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: #ccc;
    /* border-right: 1px solid #CCC; */
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
    text-indent: 0.75rem; /* indent added */
}

만약 테이블 처럼 코드에 줄이 생길 경우

.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;
}

이부분을 주석처리하거나 지워라!!! 이 주석이 없는테마도 있음 그럴경우 어떻게 해야 할지는 잘 모르겠음.....

 

참고: https://wordbe.tistory.com/entry/Tistory-%EC%BD%94%EB%93%9C%EB%B8%94%EB%A1%9D-%EC%83%9D%EC%84%B1-%ED%85%8C%EB%A7%88-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95
참고: https://freekim.tistory.com/2