코드 블록 테마 적용 - Highlight.js
공개된 코드 하이라이터 (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