안녕하세요 이번포스트는 티스토리 블로그에 코드 강조하기 입니다.
여러가지 방법으로 코드를 강조 해봤는데 마음에도 안들고 이쁘지도 않더라구요
근데 이번에 찾아봤는데 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'저는 이런식으로 서식에 저장하고 코드 사용이 필요한 부분에서
서식넣기를 이용해서 사용합니다.
이상으로 코드 하이라이트 하기에 대해 알아봤습니다.
아주 간단하죠 ? 다들 즐거운 블로거생활 되시길 바랍니다 ~
'기타 > 블로그' 카테고리의 다른 글
| 티스토리 블로그에 구글 애드센스 광고 삽입하기 (0) | 2019.02.07 |
|---|---|
| 티스토리 크롬에서 임시저장 기능 사용하기 (0) | 2019.02.02 |
| 티스토리 블로그 포스팅에 지도 첨부하기 (다음지도) (0) | 2019.01.31 |
| 티스토리 네이버 웹마스터 검색등록(robots.txt) (3) | 2019.01.30 |
| 티스토리 사이트맵 등록(구글, 네이버) (2) | 2019.01.29 |