본문 바로가기
기타/티스토리 관리

코드블록에 Highlight.js 추가하기

Aryazoa 2020. 5. 1. 20:23

2020.06.21수정사항

https://wordbe.tistory.com/entry/Tistory-%EC%BD%94%EB%93%9C%EB%B8%94%EB%A1%9D-%EC%83%9D%EC%84%B1-%ED%85%8C%EB%A7%88-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95

<!-- 코드 하이라이트 -->
<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

'기타/티스토리 관리' Related Articles

티스토리툴바