방법
코드블럭 하이라이트 및 라인넘버
html 편집 -> html <head> 와 </head> 사이에 아래 구문 추가
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/a11y-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
html 편집 -> CSS 맨 아래에 아래 구문 추가
/* Line Number 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;
width: 25px;
}
/* your custom style here */
.hljs-ln td.hljs-ln-code {
padding-left: 10px;
}
코드블럭 하이라이트
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
코드블럭 데모
Demo - highlight.js
...
highlightjs.org
기타
간혹 블로그 스킨에 따라 라인넘버를 적용하면 코드블럭이 테이블처럼 나오는 경우가 있다.
이렇게 ...
이 문제는 블로그 관리 > 꾸미기 > 스킨편집 > 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;
}'아무거나' 카테고리의 다른 글
| [python] 웹스크래핑/크롤링 시 유용한 selenium 설치 (0) | 2024.07.28 |
|---|---|
| windows server 2016 평가판 사용기간 만료연장(초기화) (0) | 2024.07.20 |
| URL Encoding/Decoding (주소 한글 변환) (0) | 2024.02.20 |
| 티스토리 목차(제목) 꾸미는 방법 (1) | 2023.12.09 |
| 티스토리 모바일 화면 확대 축소 (0) | 2023.11.10 |
댓글