블로그에 소스코드를 작성할 경우 문법 구문 강조(Syntax Highlighting) 기능이 필요하다. 문법 구문 강조(Syntax Highlighting) 기능은 언어 종류에 따라 소스코드의 keyword 색상을 다르게 하여 가독성을 높여준다.
티스토리 블로그에서는 세 가지 방법으로 문법 구문 강조(Syntax Highlighting)를 적용할 수 있다.
- 티스토리 Syntax Highlight 플러그인 사용
- highlight.js 사용: 다양한 테마 선택 가능
- Color Scripter 웹사이트 활용
이 글은 두 번째 방법인 highlight.js를 적용하는 방법과 줄번호 보이기, 접기/펼치기 기능을 추가하는 방법에 대해 설명한다.
목차
1. 티스토리 Syntax Highlight 플러그인 사용 해제 (사용하고 있는 경우에만)
티스토리 Syntax Highlight 플러그인은 highlight.js와 CSS가 충돌할 수도 있으니 사용하고 있다면 해제한다.
티스토리 관리 > 좌측 메뉴 플러그인 > 코드 문법 강조(Syntax Highlight) > 해제
2. highlight.js 다운로드 받기
아래 URL에서 "Get version xx.x.x" 버튼을 클릭한다. version은 계속 upgrade되어서 시점에 따라 다른 version일 수 있다. 이 글을 작성하는 2021년 7월 현재는 "11.1.0" 이다.
download page: https://highlightjs.org/download/
34개 common language만 필요한 경우 download 필요 없이, hosting된 script를 바로 사용할 수 있다. 이 내용은 위 download page 상단에 설명되어 있다.
이 글에서는 필요한 언어를 선택하여 download하고 설정하는 방법을 설명한다.
먼저 필요한 언어를 선택한다. 상당히 많은 언어가 제공되고 있다. 선택한 언어가 많으면 다운로드되는 script파일의 크기가 커지고 loading시간이 길어질 수 있으니, 꼭 필요한 언어만 선택하도록 한다. 나는 Common 언어중 Bash, C, C#, C++, CSS HTML/XML, JSON, Java, JavaScript, Markdown, Plain Text Python, SQL, Visual Basic .NET 이렇게 14개를 선택했다.
언어를 선택하고, 아래로 스크롤하여 download 버튼을 클릭한다.
highlight.zip 파일이 다운로드되고, 열어 보면 다음과 같다.
이 파일은 잠시 두고, 다음 단계로 진행한다.
3. 테마선택
아래 URL에서 제공되는 다양한 테마를 둘러보고 마음에 드는 테마를 선택한다. 참고로, 나는 Darcula 테마로 선택했다.
https://highlightjs.org/static/demo/
테마 예시는 다음과 같다.
4. 티스토리에 파일 업로드
다음 순서로 진행한다.
1. 적당한 위치에 다운받은 highlight.zip 파일의 압축을 푼다.
2. 티스토리 블로그 관리 페이지 좌측 메뉴에서 "꾸미기 > 스킨 편집"을 실행하고 "html 편집" 버튼을 클릭한다.
3. 파일업로드 tab으로 이동하고 하단 추가 버튼을 클릭한다.
4. 압축을 해제한 폴더에서 다음 파일을 선택하여 업로드한다.
- highlight.min.js
- 테마파일 (예: darcula.min.css): 테마 파일은 styles\base16\ 경로에 있다
* 2021-07-21 기준 참고사항
darcula.min.css를 적용하고 코드블록의 텍스트를 마우스로 드래그하여 선택할 때 선택한 텍스트의 배경색이 어둡게 설정되어 있어 잘 보여지지 않고 주석 색상을 조금 밝게하고 싶어 일부를 변경하였다. 변경한 파일은 아래에 올려두었으니 필요하다면 다운받아 사용하기 바란다. 파일명은 darcular.min.my.css로 해두었다.
변경한 내용은 다음과 같다.
- .hljs ::selection --> 주석 처리
- 주석 색상 변경: #606366 --> #7f7f7f
5. 스킨 편집
티스토리 블로그 관리 페이지 좌측 메뉴에서 "꾸미기 > 스킨 편집"을 실행하고 "html 편집" 버튼을 클릭한다.
<head> ~ </head> 사이에 아래 구문을 추가한다. 여기에서 stylesheet는 앞에서 업로드한 테마 css 파일(예: darcula.min.css)을 지정한다. (위에 업로드해 둔 darcular.min.my.css 파일을 이용한다면 파일명을 변경해 줘야 한다.)
<!-- highlight.js -->
<link rel="stylesheet" href="./images/darcula.min.css">
<script src="./images/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- end higlight -->
6. 테스트
여기까지 하면 기본적인 설정은 끝났다. 글쓰기를 실행하여 편집기 상태에서 상단 툴바의 "..."(더보기) 버튼 클릭 후 "코드블럭"을 추가한다.
예시로 다음 코드를 입력하고 상단의 언어는 "HTML"을 선택한 다음 "확인" 버튼을 클릭한다.
편집기 좌측 하단의 "미리보기" 버튼을 클릭하면 다음과 같이 적용된 결과를 확인할 수 있다.
조금 아쉬운 점은 줄번호가 보여지지 않는다는 점과 코드가 길때 접을 수 있는 기능이 없다는 점이다. 이 기능까지 설정하려면 다음으로 진행하고 필요없다면 여기까지만 설정하면 된다.
6. 줄번호 보이기, 접기/펼치기 기능 추가
줄번호 보이기는 linenumberV2.js 를 이용한다. 국내 능력자 블로거 alikong님이 직접 만들었고, 감사하게도 공개해 주셨다.
https://alikong.tistory.com/46
코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전)
재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐
alikong.tistory.com
접기/펼치기 기능도 alikong님이 제공해 주신 방법을 이용한다.
https://alikong.tistory.com/39
코드블럭 - 접기/펼치기 (+언어명 표시 & 자동 줄바꿈 적용/해제)
흠.. 쓸수록 코드블럭에 자꾸 관심이 가네여...왜지...(?) 코드블럭 공지에 올라온 댓글을 보고 오호 있으면 좋겠는데!? .. 해서 만들어 보았습니다. 뭔가 버튼이 노출되어야 하는김에 코드의 언어
alikong.tistory.com
자세한 기능 설명과 설정 방법은 위 블로그 글을 참조하기 바란다.
7. 적용 예시
몇 가지 언어의 적용 예시이다. VBA는 이 블로그에 올렸던 소스코드의 일부를 가져왔고, 다른 언어의 소스 코드는 구글 검색에서, CSS는 미넴 스킨의 CSS 일부를 가져왔다.
7.1. VBA
출처: https://prodtool.tistory.com/7#5.1.2. modFactory 모듈 소스 코드
Option Explicit
Public Function CreatePacker(aMaxBinSize As Long, aPackingType As PackingType) As CPacker
Set CreatePacker = New CPacker
CreatePacker.Init aMaxBinSize, aPackingType
End Function
Public Function CreateBin(aMaxBinSize As Long) As CBin
Set CreateBin = New CBin
CreateBin.Init aMaxBinSize
End Function
참고로 VBA는 코드블록에 선택할 수 있는 언어 목록에 없어서 HTML 편집에서 <pre> tag의 class, data-ke-language attribute 값을 직접 변경해 줘야 한다.
▼ 변경전
<!-- 변경전 HTML (pre tag의 class, data-ke-language = "html") -->
<pre id="code_1626827076325" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>Option Explicit
Public Function CreatePacker(aMaxBinSize As Long, aPackingType As PackingType) As CPacker
Set CreatePacker = New CPacker
CreatePacker.Init aMaxBinSize, aPackingType
End Function
Public Function CreateBin(aMaxBinSize As Long) As CBin
Set CreateBin = New CBin
CreateBin.Init aMaxBinSize
End Function</code></pre>▼ 변경후
<!-- 변경후 HTML (pre tag의 class, data-ke-language = "vba") -->
<pre id="code_1626827076325" class="vba" data-ke-language="vba" data-ke-type="codeblock"><code>Option Explicit
Public Function CreatePacker(aMaxBinSize As Long, aPackingType As PackingType) As CPacker
Set CreatePacker = New CPacker
CreatePacker.Init aMaxBinSize, aPackingType
End Function
Public Function CreateBin(aMaxBinSize As Long) As CBin
Set CreateBin = New CBin
CreateBin.Init aMaxBinSize
End Function</code></pre>
7.2. Java
출처: https://www.programiz.com/java-programming/examples/add-numbers
class Main {
public static void main(String[] args) {
System.out.println("Enter two numbers");
int first = 10;
int second = 20;
System.out.println(first + " " + second);
// add two numbers
int sum = first + second;
System.out.println("The sum is: " + sum);
}
}
7.3. Python
출처: https://www.programiz.com/python-programming/examples/add-number
# This program adds two numbers
num1 = 1.5
num2 = 6.3
# Add two numbers
sum = num1 + num2
# Display the sum
print('The sum of {0} and {1} is {2}'.format(num1, num2, sum))
7.4. HTML
출처: https://www.javatpoint.com/simple-html-pages
<Html>
<Head>
<title>
Example of Paragraph tag
</title>
</Head>
<Body>
<p> <!-- It is a Paragraph tag for creating the paragraph -->
<b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language
is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides a flexible way for designing the
web pages along with the text.
</p>
HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
</Body>
</Html>
7.5. CSS
이 블로그에서 사용하고 있는 미넴 스킨의 CSS 일부를 발췌했다.
header {
position: relative;
width: 100%;
overflow: hidden;
z-index: 100;
height: 127px;
}
header:after {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
header .inner {
position: relative;
margin: 0 auto;
padding: 10px;
}
이 블로그 설정도 여러차례 시행착오 후에 정착된 것이라 위 내용 외에 추가 설정이 필요할 수 있다. HTML, JavaScript, CSS는 나도 아주 기초적인 내용만 이해하고 있어 이미 잘 만들어진 코드들을 조합하여 사용하고 있다. 적용하다가 잘 안되는 점이나 궁금한 점은 댓글로 남겨주시기 바란다.
'블로그 운영 > 티스토리 설정' 카테고리의 다른 글
| 미넴 스킨 V2.4 적용 (12) | 2021.07.10 |
|---|
댓글