티스토리 블로그 코드 강조하기(코드 하이라이트) highlightjs
안녕하세요 이번포스트는 티스토리 블로그에 코드 강조하기 입니다.
여러가지 방법으로 코드를 강조 해봤는데 마음에도 안들고 이쁘지도 않더라구요
근데 이번에 찾아봤는데 highlightjs라는 마음에 드는 JS를 찾았습니다.
이런식으로 사용할수 있습니다.
function calc(x) {
return x * x;
}
var x = calc(10);
console.log(x);일단 highlightjs는 기본적으로 사용법이 간단하고
잘만 따라오신다면 적용법도 매우 간단합니다.
그리고 한번 적용만 하신다면 그이후로는 아주 쉽게 사용하실수 있습니다.
1. 원하는 코드, 스타일 찾기
https://highlightjs.org/static/demo/
링크로 들어갑니다.
Language categories에서 원하시는 언어를 찾습니다.
저는 일단 자바스크립트를 찾았습니다. scripting 섹션 중하단쯤에 있었습니다.
그리고 Stryles에서 원하시는 테마를 입혀봅니다.
저는 Atom One Dark Reasonable이 마음에 들더라구요
원하시는걸 다 고르셨다면
2. js 다운
https://highlightjs.org/download/
위 링크로 들어가셔서 하단에 custom package 부분에서
자신이 원하는 언어가 선택되어 있는지 확인합니다.
common부분은 어차피 많이 사용하는 부분이여서
기본적으로 선택하시고 Download 버튼을 누릅니다.
3. 블로그 적용 및 사용법
styles 폴더에서 위에서 고르신 테마를 찾아서 밖으로 빼 줍니다.
저는 atom-one-dark-reasonable을 골라서 밖으로 빼줬습니다.
그리고 테마파일과 highlight.pack 이 두가지를 블로그에 업로드 해줍니다.
블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가
두가지 파일이 잘 추가가 되었다면
상단 탭에서 HTML을 눌러줍니다.
그리고 <head>태그 바로 밑에다 붙혀넣어 주시는데
<link rel="stylesheet" href="./images/atom-one-dark-reasonable.css"> <script src="./images/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>
맨 첫번째줄 <link rel="stylesheet" href="./images/atom-one-dark-reasonable.css">에서
atom-one-dark-reasonable 부분은 아까 자신이 고른 테마 파일 이름을 적어줍니다.
저는 atom-one-dark-reasonable을 골라서 넣어준겁니다.
똑같이 하시면 안되고 본인이 고르신 파일명을 넣어주시면 됩니다.
<head>태그에 붙혀 넣는것까지 하셨다면 이제 끝입니다.
바로 사용해보겠습니다.
이제 글쓰기를 들어가셔서 html부분을 체크해주신후
아래 처럼 넣어줍니다
<pre><code class="본인사용언어">코드~~</code></pre>
<pre><code class="language-js" style="font-size:15px">var a = 'a'</code></pre>
var a = 'a'저는 이런식으로 서식에 저장하고 코드 사용이 필요한 부분에서
서식넣기를 이용해서 사용합니다.
이상으로 코드 하이라이트 하기에 대해 알아봤습니다.
아주 간단하죠 ? 다들 즐거운 블로거생활 되시길 바랍니다 ~