-
코드 블록 테마 적용 - Highlight.jsETC 2020. 12. 18. 09:29
공개된 코드 하이라이터 (https://highlightjs.org/) 10.4.1 버전 기준 190개의 언어와 97개의 스타일을 지원합니다.
기본 설정
37개의 언어를 지원하는 Prebuilt version을 cdn 방식으로 import 하여 사용가능합니다.
<!-- Highlight.js 설정 --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>위 내용을 [꾸미기 > 스킨편집 > html 편집]을 통해 <head> ... </head> 사이에 삽입합니다.
스타일 변경을 위해서는 https://highlightjs.org/static/demo/ 에서 마음에 드는 스타일 선택 하여 삽일할 내용의 default.min.css 대신에 <style-name>.min.css 으로 변경하면 됩니다.
이후 HTML 모드에서 <pre><code> 태그를 통해 코드를 삽입 하면 됩니다.
<pre><code> My code line1 My code line2 . . . </code></pre>보통 자동으로 입력된 코드를 감지 하여 동작 할 것이고, 언어를 지정하고 싶을 경우 아래와 같이 사용하면 됩니다.
<pre><code style="python"> print("Hello Python") </code></pre>추가 적인 설정을 하고자 하는 경우
폰트변경
1. [꾸미기 > 스킨편집 > html 편집 > CSS] 을 통해 아래 내용 추가
/* Code block style */ code { padding: 0.25rem; background-color: #F1F1F1; border-radius: 5px; font-family: "Consolas", "Sans Mono", "Courier", "monospace"; font-size: 0.75rem; } pre > code { margin: 1rem auto; }라인추가
github.com/wcoder/highlightjs-line-numbers.js 참조
wcoder/highlightjs-line-numbers.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
1. [꾸미기 > 스킨편집 > html 편집]을 통해 <head> ... </head> 사이에 아래 내용 삽입합니다.
<!-- Highlightjs-line-numbersjs 설정 --> <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> <script>hljs.initLineNumbersOnLoad();</script>2. [꾸미기 > 스킨편집 > html 편집 > 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; /* your custom style here */ } /* for block of code */ .hljs-ln-code { padding-left: 10px; }티스토리에서 충돌이 발생하는 것인지.. 아래 내용을 적용해야 UI 충돌을 피할수 있습니다.
3. [꾸미기 > 스킨편집 > html 편집 > CSS] 에서 아래 내용을 찾아 ".artivle_view table " 관련 스타일들을 삭제(본문에서 표를 안쓸경우) 또는 아래와 같이 수정(표가 나올 경우에만 스타일이 적용하게 하고 싶을경우) 합니다.
.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; }/* .article_view table { */ .article_view > table { border: 1px solid #dadce0; border-collapse: collapse; } /* .article_view table thead tr{ */ .article_view > table thead tr { background: rgba(0, 0, 0, 0.05); font-size: 16px; color: #000; } /* .article_view table th, */ /* .article_view table td { */ .article_view > table tr th, .article_view > table tr td { padding: 7px; border-left: 1px solid #dadce0; } /* .article_view table tr { */ .article_view > table tr { border-bottom: 1px solid #dadce0; }
reference
github.com/wcoder/highlightjs-line-numbers.js