Tistory SyntaxHighlighter 설정하고 사용하기
잡담
2016. 6. 15. 12:23
위와 같이 Tistory 블로그에서는 HTML 파일을 편집해서 이쁘장하게 코드를 보여줄 수 있습니다.
SyntaxHighlighter 라는 것입니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
위의 링크로 들어가서 Click here to download(누르시면 바로 다운로드) 를 누르시면 됩니다.
다운로드를 받아서 압축을 풀게되면
위와 같은 파일들이 있을 겁니다.
이 중에서 Tistory에 업로드 해야하는 것은 scripts 폴더의 파일 전부와 styles 폴더의 파일 전부입니다.
그렇다면 Tistory 관리자 탭에 들어가서
HTML/CSS 편집 탭에 들어가서
파일 업로드 부분에 들어갑니다.
들어가서
추가 버튼을 누르고 아까 압축을 풀었던 scripts 폴더의 파일과 styles 폴더의 파일들을 전부 추가해줍니다.
그리고 아래의 코드를 </head>의 바로 위에 넣어줍니다.
이렇게 입력해줍니다. 그 다음 <body> 태그를 아래와 같이 바꿔줍니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
이제 설정 부분은 끝났습니다...!!
직접 작성하는 부분만 남았습니다.
글을 작성하다가 코드를 넣고 싶은 부분이 생긴다면 외부 컨텐츠 탭을 열고
원하는 코드
를 html 편집기로 넣어주면 아래와 같이 됩니다!
puts 'Hello world!'
읽어주셔서 감사합니다 :)
'잡담' 카테고리의 다른 글
| 한성 GTune CHL5 XRGB 리뷰! (0) | 2016.02.13 |
|---|---|
| 우리들의 앙트쉽 파티 참여 후기! (0) | 2016.01.31 |