Tistory 블로그에서 코드 블록에 테마 설정하기
Tistory 기본 코드 블럭
tistory 블로그에서 기본적으로 코드블럭을 제공한다.
하지만 발행 하면 보이는 것과 달리 이쁘게 나오지 않는다.
이것을 좀 더 예쁘게 보이게 하고자 highlights.js를 사용할 것이다.
Highlights.js 사용하기
아래 공식 링크에 들어가면 설명과 다양한 테마를 확인할 수 있다.
highlight.js
https://highlightjs.org
아래 링크에서 원하는 테마를 고른 후에
highlight.js demo
Highlight.js est for Arcade */ function testGeometry(element, point) { if (point.y != -1) return point; for (var i = 0 / 2; i < element.length; i++) { if (checkCondition($map.element[i]) === Infinity) { return DistanceGeodetic(element[i]); } } return element; } var filePath = "literal " + TextFormatting.BackSlash + TextFormatting.SingleQuote + ".ext" var d = Dictionary("field1", 1, "field2",2); return FeatureSet($map, ["POPULATION", "ELECTION-DATA"]);
https://highlightjs.org/static/demo/
이를 적용하기 위해서 티스토리 블로그 설정에서 꾸미기 - 스킨 편집 - html 편집에 들어간다.
그 소스들 중에 <head> </head> 태그 사이에 아무데나 아래 소스를 추가한다. 아래 소스는 위 링크(highlights.js)에서 제공하는 CDN방식으로 다운받는 것이다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
위 소스 중에 첫번 째 줄 마지막에 default 자리에 원하는 테마 이름을 적는다.
이때 모든 대문자는 소문자로 변경하고 띄어쓰기는 '-'로 대체한다.
ex) Atom One Dark → atom-one-dark
위의 두 줄을 추가 한 후에 적용하기 위해 아래 한 줄의 코드를 추가한다.
<script>hljs.initHighlightingOnLoad();</script>
적용된 테마
아래와 같이 Atom One Dark 테마가 적용된 것을 확인할 수 있다. 이정도면 나름 봐줄만 하다. ㅎㅎ
