티스토리의 플러그인인 코드블럭 사용 시 라인 넘버를 사용할 수 없어서 직접 적용해야함
구글 + 네이버 메타 태그 백업 (적용법)
https://200-rush.tistory.com/entry/tistoryskinchange
코드 블럭 + 라인 넘버
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
https://github.com/highlightjs/highlight.js
내부 코드 수정
/*.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
'ETC > 잡다' 카테고리의 다른 글
카톡 친구 삭제, 친구 차단 후 해제했을 때 친구 추천 목록 차이 (0) | 2024.09.18 |
---|---|
갤럭시 워치 톡 캘린더 알림 (0) | 2024.09.18 |
갤럭시 워치 나와의 메시지 삭제 방법 (0) | 2024.09.18 |
Yes24 ebook 읽은 페이지 연동되지 않을 때 (0) | 2024.09.18 |
웹 아웃룩(OWA)에서 도형 오브젝트 위치가 변경되어 수신 될 때 (0) | 2024.03.30 |