ETC

코드 블록 테마 적용 - Highlight.js

꼼지락꼼지락 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

highlightjs.org/

github.com/wcoder/highlightjs-line-numbers.js

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

fosterahope.tistory.com/186