2020.06.21수정사항
<!-- 코드 하이라이트 -->
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/xcode.css">
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
/* 줄번호 스타일 */
.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 */
}
/* 코드 스타일 */
code {
padding: 0.25rem;
background-color: #F1F1F1;
border-radius: 5px;
font-family: "Consolas", "Sans Mono", "Courier", "monospace";
font-size: 0.75rem;
}
pre > code {
line-height : 1.5em; // 줄간격
}
</style>
https://bumcrush.tistory.com/182
티스토리 코드 하이라이트 넣는 방법 완벽 정리! ( highlight.js 적용하는 법 )
티스토리 코드 블럭 하이라이트 넣는 방법 완벽 정리! ( highlight.js 적용하는 법 ) 티스토리에 코드 하이라이터를 넣는 방법에는 Colorscripter, SyntaxHighlighter 등 몇가지가 있습니다. 하지만 제가 이상�
bumcrush.tistory.com
HTML
<!doctype html>
<html lang="ko">
<head>
...
<!-- 코드 하이라이트 -->
<script src="./images/highlight.pack.js"></script>
<link rel="stylesheet" href="./images/vs2015.css">
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 라인 넘버 표시 -->
<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});
</script>
...
</head>
CSS ( 1396Line에 추가되어 있었다.)
다른부분 다 제거하고 숫자칼라지정 여백 세로줄(배경과 같은색으로 안보임, 칼라 확인후 수정)
vs2015.css 에 적용된 다크테마
/* modified...*/
.hljs-ln td.hljs-ln-numbers {
color: #555555;
padding-right: 7px;
text-align: right;
border-right: 1px solid #1E1E1E;
}
아 처음에 코드에 표가 표시되었다.
이부분은 이블로그에서 확인
https://meyouus.tistory.com/64
티스토리 코드블럭 Highlight.js에 Line Number 적용하기
안녕하세요. 티스토리에 글을 작성하다 보면 코드블럭에 코드를 입력하고 가독성을 높이기 위해 Highlight.js를 적용하고 있습니다. 하지만 라인번호(Line Number)가 없어 아쉬움이 있었는데 highlightjs-line-nu..
meyouus.tistory.com
.entry-content > table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
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;
}
테마적용 확인하기(Demo)
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
'기타 > 티스토리 관리' 카테고리의 다른 글
| 엑셀 시간 업데이트 참조 (0) | 2020.08.20 |
|---|---|
| 코드블록 넘침 에러 수정 CSS코드 (0) | 2020.05.24 |