ETC/잡다

오디세이 스킨, 코드 블럭, 라인 넘버

hamaganatanadda 2024. 9. 15. 15:42

티스토리의 플러그인인 코드블럭 사용 시 라인 넘버를 사용할 수 없어서 직접 적용해야함

 

구글 + 네이버 메타 태그 백업 (적용법)

https://200-rush.tistory.com/entry/tistoryskinchange

 

티스토리 스킨 변경 후 html 재설정 방법

너무 이쁜 스킨을 발견하고 스킨을 변경했다. 그런데!!! html에 설정해 놓은 구글 에드센스며 네이버, 서치콘솔 등 메타테크가 다 날라가버렸다. 스킨은 함부로 변경하는 게 아니란다. 자세한 내

200-rush.tistory.com

 

코드 블럭 + 라인 넘버

github 에서 제공하는 방법 그대로 적용

<!-- html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
  hljs.highlightAll(); 
  hljs.initLineNumbersOnLoad();
</script>

 

/*CSS*/
/* 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 !important; <- important 넣어야함

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px !important; <- important 넣어야함
}

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

 

GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

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

github.com

https://github.com/highlightjs/highlight.js

 

GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.

JavaScript syntax highlighter with language auto-detection and zero dependencies. - highlightjs/highlight.js

github.com

 

 

내부 코드 수정

/*.article-view table --> .article-view > table 로 변경 */

.article-view > table {
  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;
}

/*폭 늘리고 프로필에 글쓰기 블로그 관리 왼쪽 라인이 맞지 않을 때 찾아서 주석*/
.area-aside .box-profile .btn-g + .btn-g {
  margin-left: 10px;
}

/* 
라인 넘버를 넣으면 코드 사이에 공간이 많이 생기는데 이걸 변경해야 사라짐. 
이 부분은 구글링으로 찾을 수 없었음
#article-view table td --> #article-view table > td 
*/
#article-view table > td {
  word-break: break-word;
  padding: 8px;
  font-size: 15px;
}


/*
줄바꿈이 생기면 코드 사이에 공간이 많이 생기는데 이걸 넣으며 가로 스크롤이 생김
*/
.hljs {
    white-space: pre;
    overflow-x: auto;
}

 

본문 폭 늘리기 (여기 잘 되어 있다)

https://wildeveloperetrain.tistory.com/216

 

티스토리 Odyssey Skin 본문 너비(폭) 늘리는 방법

Odyssey skin은 티스토리에서 스킨 변경을 통해 기본적으로 사용할 수 있는 스킨 중 하나인데요. 반응형과 목록 광고 형태가 지원되며, 깔끔한 디자인으로 인해 여러 블로그에서 많이 사용되는 스

wildeveloperetrain.tistory.com