티스토리로 코드블록 기능을 이용해서 코드를 업로드하시는 분들이 많죠! 티스토리의 에디터가 새로워지고 나서 코드 블럭을 이용해 더 간편하게 코드를 올릴 수 있게 되었습니다. 하지만 폰트 선택이라던지 색상 입히는 것이 어렵다는 단점이 있습니다.
새로워진 에디터를 사용하면 상단에 더보기 버튼에 코드블럭을 쉽게 사용할 수 있는데요! HTML, CSS, Javascript, Python, Java, C++, Kotlin, Swift, PHP, Go 의 옵션을 선택할 수 있죠!
간단한 코드를 작성하고 에디터에서 보면 이렇게 잘 색이 예쁘게 입혀져 나옵니다. 하지만, 포스팅을 하고나서 확인해보면 잘 입혀지지 않는 경우가 많습니다. pre 와 code 태그에 색깔을 입혀줘야 포스팅 이후에도 예쁘게 출력되는 모습을 볼 수 있습니다.
이를 위해 간단하게 티스토리 플러그인 'Syntax Highlight' 를 사용해서 색을 입힐 수 있습니다. 하지만 지원하는 언어 옵션이 많지 않고 제가 원하는 대로 테마를 입힌다거나, 커스터마이징하기 불편하기 때문에 저는 이걸 사용하다가 highlight.js 를 직접 설정하게 되었습니다.
highlight.js 설정
highlight.js
Version 9.15.7 New languages: none. New styles: none. Improvements: - fix(powershell): Add cmdlets (#2022) - fix(Bash): escaped double quotes (#2041) - fix(c++): add aliases 'hh', 'hxx', 'cxx' (#2017) - fix(ini/toml): Support comments on the same line. (#2
highlightjs.org
저 링크를 확인해보시면 사용법과 간단한 코드 적용 테마 모습을 확인해 볼 수 있습니다. 총 185개 언어와 91개의 테마(스타일)을 제공하고 있다고 나와있네요! 저 링크에 들어가 highlight.js를 다운받아 설정할 수도 있지만 저는 링크를 통해 설정하는 법을 알려드리려고 합니다.
<!-- syntax highlight -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>먼저 티스토리 블로그 관리에 들어가 스킨편집 > html 변경을 들어가줍니다. 거기에 <head> 태그 안에 이 코드를 적용해주시면 됩니다. 저는 Atom One Dark 테마를 적용했는데요. 다른 테마를 적용하고 싶으시다면 위 페이지에 들어가 마음에 드는 테마를 골라서 대문자는 소문자로, 띄어쓰기는 '-' 바로 변경해주고 첫 줄 링크에 붙여넣으시면 됩니다.
<pre><code class="css">some code...
some code...
</code></pre>마지막 줄은 코드블럭에 있는 코드의 언어를 자동으로 감지해주는 코드입니다! 만약 자동으로 언어를 감지해주는 게 잘 안되는 것 같다고 느껴지시면 티스토리 에디터에서 이런 식으로 작성해주시면 해당 class로 언어를 감지해 색을 입혀줍니다!
폰트 변경
폰트 변경을 위해 구글 폰트에서 원하는 폰트를 골라 코드를 가져옵니다. 위처럼 티스토리 블로그 관리 > 스킨 변경 > html 편집에 들어가 <head> 태그 내에 위의 <link ...> 코드를 붙여넣습니다.
<style>
pre, code {
font-family: 'Source Code Pro';
line-height: 1.5;
}
</style>그리고 <head> 내부에 이런식으로 작성해 폰트를 변경해주면됩니다. 저는 가독성을 위해 줄 간격 line-height도 1.5 로 설정해주었습니다. 아마 code 태그에만 적용해도 될텐데 혹시 몰라 pre 태그 CSS 에도 적용시켜 두었습니다!
class MyClass {
public static myValue: string;
constructor(init: string) {
this.myValue = init;
}
}
import fs = require("fs");
module MyModule {
export interface MyInterface extends Other {
myProperty: any;
}
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax마지막으로 TypeScript class 를 적용한 코드블럭의 사용예시입니다.
'Develop > Blog' 카테고리의 다른 글
| 티스토리 다크모드 적용 상세 - Book Club 테마 기준 (21) | 2020.08.29 |
|---|---|
| 티스토리 다크모드 적용하기 (10) | 2020.02.24 |
| 트위터 해킹? 잠금 해제 일시 정지 계정 복구하기 (3) | 2020.02.19 |
| 블로그 푸터 링크 추가 및 스킨 변경 (0) | 2019.08.28 |
| 티스토리 스킨 설치 구글 네이버 광고 분석 코드 옮기기 (4) | 2019.08.26 |
댓글