코드 블럭 테마 설정 (Highlight.js)
1. 코드 블럭 테마 (Highlight.js)
github.com/highlightjs/highlight.js#getting-the-library
2. 코드 블럭 라인넘버 추가 (hilightjs-line-number)
github.com/wcoder/highlightjs-line-numbers.js
CDN 통해서 프로젝트 적용 (참고 : uxgjs.tistory.com/102)
스킨 편집 → HTML 편집 → HTML
<!-- 코드블럭 테마; Highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/night-owl.min.css"> <!-- 테마 선택 (현재 night-owl) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드블럭 라인넘버 표시; hilightjs-line-number -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
이후 CSS 변경을 통해 원하는 스타일로 바꾸기 가능.
/* Highlight.js Code block style */
pre {
margin : 0.5rem;
border : 0;
padding : 0;
}
.hljs {
white-space: pre;
max-width:850px;
max-height:500px;
overflow:auto !important; /* scroll setting; overwrite */
margin : 0;
border : 0;
padding: 0.7rem;
padding-left : 0.2rem;
font-family: "Consolas", "Monaco", "monospace", "Sans Mono", "Courier", "monospace";
font-size: 0.9rem;
}
/*
pre > code {
}
Highlight.js가 사용된 <code> 블록은 hljs 클래스를 가지므로,
pre > code 변경 = .hljs 변경
*/
/* Highlight.js Line number; 테이블 이용해서 구현되어있음 */
/* 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 */
width : 25px;
height : 25px;
}
/* for block of code; 코드블럭 라인 옆 코드 스타일*/
.hljs-ln-code {
padding-left: 10px;
text-indent: 0.75rem; /* indent added */
vertical-align: top;
}확인된 문제점 :
1. 한글 코멘트가 입력되는 경우, alignment가 흐트러짐 → .hljs-ln-numbers height 적당히 늘려줌. 그래도 조금 그럼
2. Highlighjs-line-number 스크립트가 <head>에 자동으로 default <style> 추가해서 CSS 수정이 안먹히는 경우 :
github.com/wcoder/highlightjs-line-numbers.js/issues/54
[참고) CSS 수정하기]
1. CSS selector로 스타일을 바꾸고 싶은 HTML tag를 고른다.
2. 적절한 attribute를 설정해서 이쁘게 바꾼다.
* 크롬 홈페이지 → 오른쪽 클릭 → 검사 → Element에서 원하는 요소 클릭 후,
Styles를 보면 해당 요소가 어떤 CSS 코드에 영향을 받는지 볼 수 있음. 이걸 보고 CSS 코드 값을 추가/삭제/조정
Q. 블로그 글에서 소스보기 하면 글 내용의 소스는 안나옴.
그러나 F12로 Elements 보면 그때서야 나옴. 뭔 차이지?
(그 소스가 실행되서 글 내용의 HTML이 generate 되는거 아님? 그게 Back-end 구조자너)
'아카이브 > 블로그 관리' 카테고리의 다른 글
| 사이드바 숨기기 (0) | 2022.01.27 |
|---|---|
| 스킨 변경 후, 카테고리 클릭 시 글 목록이 안보이는 경우 (0) | 2022.01.27 |
| Table of Content (TOC) 추가 (0) | 2022.01.26 |
| 제목 및 본문 테스트 - TOC 테스팅 (0) | 2022.01.26 |
| 티스토리 인용구 만들기 (0) | 2020.12.05 |