개발자나 프로그램 소스코드를 티스토리 블로그에서 표현할때 불편한 점이 있다.
바로 소스코드를 표현해주는 공식 플러그인이 없다.
개발 관련 블로그는 네이버 블로그보다 티스토리가 훨씬 많은데 이러한 기능을 지원하지 않는 것은 이해하기 어렵다.
그냥 텍스트로 넣으면 문법 강조가 되지 않아서 보기 어렵고, 캡쳐해서 넣으면 길이가 긴 코드는 표현하기 어렵다.
그러나 방법이 아주 없는 것은 아니다.
오픈소스로 공개 된 툴을 티스토리 스킨 소스코드에 적용하면 된다.
다음과 같은 기능을 사용할 수 있다.
- 소스코드의 문법 강조
- 줄번호 표시
- 특정 행 강조
오픈소스로 공개 된 툴은 여러가지가 있지만, 구글링이나 포털 검색을 해보면 Syntax Highlighter가 가장 일반적이다.
여러 블로그에 이미 충분히 소개되어 있지만, 조금씩 내용이 다르고 해서 블로그에 적용한 내용을 중심으로 다시 정리한다.
Syntax Highlighter 다운로드
아래 파일을 다운로드 한다.
압축을 풀고 scripts, styles 폴더를 확인한다.
티스토리에 업로드
티스토리에서 사용하려면 티스토리에 업로드해야 한다. 사용중인 스킨에서 html 수정 기능을 지원해야 한다.
티스토리 블로그 관리자 화면에서 좌측의 스킨 편집 버튼을 클릭한다.
좌측의 블로그 페이지와 우측에 스킨 편집으로 구분된다.
우측의 스킨 편집 화면에서 html 편집을 클릭한다.
화면 상단의 파일 업로드를 선택한다.
화면 하단의 추가 버튼을 클릭한다.
폴더 단위 업로드가 되지 않으므로 두번에 나눠서 진행한다.
- scripts 폴더의 모든 파일을 선택하고 업로드한다.
- shBrush+언어이름.js 형태로 구성되어 있다.
- 각 언어별로 문법 강조를 해주는 부분이다.
- styles 폴더의 모든 파일을 선택하고 업로드한다.
- 코드 표시 부분의 skin/theme 같은 역할이다.
- 개인적으로는 Emacs 테마를 선호한다. Midnight 테마를 선호하는 유저도 많은 편이다.
업로드가 완료되면 파일들이 정상적으로 업로드 되었는지 확인한다. 다음과 같이 images 폴더에 모두 업로드 된 것을 확인할 수 있다.
상단 우측이 저장 버튼을 꾸욱 눌러준다.
스킨의 HTML 수정
상단 좌측이 HTML을 클릭한다.
</head> 부분의 바로 위에 아래 코드를 입력한다.
다른 테마를 적용하고자 하는 경우 styles 폴더의 파일명을 참고하여
아래 link type 태그의 href 부분에 정의 된 파일명을 수정한다.
개인적으로 선호하는 Emacs 테마를 적용한다.
<!-- syntaxhighlighter_3.0.83 적용 코드 시작 -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCoreEmacs.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEmacs.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<!-- syntaxhighlighter_3.0.83 적용 코드 끝 -->
우측 상단의 ‘저장’ 버튼을 꾸욱 눌러준다.
블로그 글쓰기에 적용
이제 드디어 블로그 글쓰기에 적용할 차례다.
글 작성 중 코드를 입력하고자 하는 부분에서 메뉴의 “외부컨텐츠”를 클릭한다.
html을 선택하고 소스 입력 부분에 다음과 같이 입력한다. 소스입력 항목 내용은 앞으로 고정적으로 사용할 템플릿과 같다.
- brush: 다음에 사용할 언어를 지정한다. 사용 가능한 언어는 다음과 같다. (출처 : http://alexgorbatchev.com/SyntaxHighlighter/)
- textarea가 아닌 pre 태그를 사용한다.
- 그로 인해 <는 < 태그, >는 > 태그로 수정한다.
<pre class=“brush:사용할언어”> 코드부분 </pre>
위의 내용만 입력하고 확인 버튼을 누르면 다음과 같이 회색 음영 부분을 볼수 있다. pre 태그 적용 부분이다.
회색 음영 부분에 있는 “코드부분"을 입력하고자 하는 코드로 수정한다.
Ctrl+C, Ctrl+V로 옮기는 경우 태그나 서식이 포함되어 있으면 정상 표시되지 않는다.
윈도우 메모장 같은 곳에 코드를 붙여넣기 하고 다시 복사하면 서식 적용되지 않은 순수한 텍스트만 복사할 수 있다.
이러한 경우에도 <, > 부분은 문제가 발생할 수 있다.
먼저 코드 그대로 사용해보고 문제가 발생하면 <는 < 태그, >는 > 태그로 수정한다.
이제 원하는 코드를 블로그 이곳저곳에 넣으면서 작성한다.
이렇게 해도 <, > 때문에 절반 노가다인데... 왜 하는가 싶다.... 제발 개발자들을 살려주세요. T^T
자. 이제 설치하고 사용하는 것은 이 정도로 하고 Syntax Highlighter에 대해 알아보자.
Syntax Highlighter 개요
아래 사이트에서 공식 배포 중이고 3.0.83 버전이다.
Alex Gorbatchev라는 사람이 만든 것으로 추정된다. 라이센스는 GNU GPL Ver.3를 따르고 있다.
수정 후 재배포시에는 Lesser GPL 또는 MIT License로 배포하면 된다고 적혀있다.
우리는 소스코드를 블로그에 적용하는 것 외에, 코드 수정은 하지 않으므로 해당사항이 없다.
참고로 GPL과 MIT License를 간략히 설명하면 다음과 같다.
- GNU GPL : GNU의 리차드스톨만에 의해 만들어졌다. 오픈소스의 코드를 수정하면 반드시 동일한 GPL로 공개해야 한다.
- GNU Lesser GPL : GPL의 무조건 공개라는 엄격함을 보완하기 위한 라이선스로 LGPL이라고도 한다. 단순 라이브러리나 모듈링크로 공개하는 것을 허용한다.
- MIT License : 우리가 아는 그 MIT가 맞다. 메사추세츠 공과 대학에서 만든 라이선스로, 라이선스와 저작권 표시만 하면 된다.
프로그램 개발을 진행하다보면 필요한 라이브러리나 오픈 소스를 사용하게 된다. 이러한 오픈소스 라이센스를 알아두면 도움이 된다.
Syntax HighLighter 다운로드
홈페이지 우측 메뉴에서 download를 클릭하면 Github 사이트로 이동한다.
Github 사이트로 이동해서 README.md 파일을 보면 4.0인 것을 확인할 수 있다. 홈페이지는 3.0.83인데?
무언가 진행이 안되는듯 하기도 하고.. 다른 블로그도 참고해보니 4.0 버전은 적용 방식이 3.0과 다르다고 한다.
게다가 홈페이지에 공식 가이드도 없고 해서 3.0.83으로 진행한다.
Github의 가운데 부분 releases 부분을 클릭한다.
아래쪽으로 이동하다보면 3.0.83이 보인다.
Source code (zip)을 클릭해서 파일을 다운로드 받는다.
아래 URL로도 바로 이동 가능하다.
블로그 스킨 코드에 적용시 주의사항
소스코드는 images 폴더에 업로드 되는데, 우리가 수정하는 부분이 블로그 스킨을 위한 html 코드이기 때문에 그렇다.
- 파일명이 중복되지 않으므로 큰 문제가 되지 않는다.
- 티스토리 블로그의 스킨의 경우 html 코드가 있는 루트 부분과 이미지를 표시하는 images 경로로 구분한다.
- 사실 images 폴더에 css, js 파일이 위치하는 것이 올바른 것은 아니다.
- 그러나 블로그 페이지를 읽는 과정에서 해당 스크립트를 읽어야 코드 강조 부분에서 사용 가능하므로 부득이하게 사용한다.
- 따라서 블로그 스킨을 변경하는 경우 적용이 풀릴 수 있으며, 변경한 스킨에 맞춰서 다시 적용해야 한다.
< to < > to > 태그 자동 변환
아래 블로그 자료 읽다가 <, > 기호를 <, > 태그로 변환해주는 프로그램 내용을 보았다.
문자열을 입력을 받고 <, > 기호가 발견될 때마다 <, >로 변환해주는 프로그램이다.
Exe 파일로 되어 있어 윈도우에서만 가능하다.
리눅스나 맥에서 사용 가능한 간단한 파이썬 코드를 작성해보는 것도 좋을듯 싶다.
참고자료
아래 자료들을 참고하였다.
'::: IT인터넷 :::' 카테고리의 다른 글
| 우분투에 VMware 설치 - Could not open /dev/- vmmon: 오류 (1) | 2021.06.05 |
|---|---|
| 우분투에 VMware 설치 - /usr/bin/vmware: 줄 105: 14025 세그멘테이션 오류 (0) | 2021.06.05 |
| filemagic (파일 포맷 확인) 삽질기 (0) | 2016.03.17 |
| Python-magic (파일포맷 확인) 설치 삽질기 (2) | 2016.03.16 |
| 파이썬에서 pip 사용시 업그레이드 메시지 출력시 (0) | 2016.03.16 |