이번에는 syntaxhighlighter와 highlight.js, prism.js 를 티스토리 블로그에 설정하는 방법을 작성하려고 합니다.
※ 주의 사항
여러 개발자, 블로거 그리고 일반 사용자분들도 꼭 명심해야할 것이 있다.
바로 각종 프로그램, 라이브러리 등을 다운받을 때는 꼭 공식 홈페이지에서
정식 버전을 다운 받아야 하는 것이다.
종종 허접한 블로그, 카페 등지에서 돌아다니는 파일들에는
악성 코드 등이 삽입되어 사용자들의 정보를 빼오거나
컴퓨터를 중간 경유지 혹은 봇(Bot)등으로 사용하는 경우가 종종 발생한다.
설치 파일 뿐만 아니라 워드, 한글, 파워포인트, 그림 파일 등 어떠한 파일도 악성 코드를 심는 것이 가능하며
이러한 악성 코드가 실행된 컴퓨터는 조금만 과장해서 표현하면
내 컴퓨터를 해커에게 줘버린 셈이다.
개발자 그리고 보안인으로서 인터넷에서 파일을 다운 받으시는 분들은
꼭!! 정식 경로에서 다운받길 바랍니다.
syntaxhighlighter 최신 버전 v4.0.1 build 하기
결론부터 얘기하면 github에서 syntaxhighlighter 최신 버전인 v4.0.1을 받으려고 시도했으나 실패했습니다.
그래도 syntaxhighlighter v4.0.1 build 순서는 살펴 보도록 해보겠습니다.
저는 windows 10의 환경에서 build를 시도하였으며, 여러 이유 중 하나로 windows 환경을 뽑겠습니다 .
dependency package 일부가 http response code 404 not found가 뜨는 것도 여러 이유 중 하나인 것 같습니다.
python 2.X도 일부 원인이 있었으며, babel을 찾지 못한다는 에러 로그도 보았는데
babel에 대한 개념이 없어서 잘 모르겠네요.
나중에 linux 환경에서 다시 한 번 시도해보고 블로그에 올리도록 하겠습니다.
위의 주의사항에 적었던 것 처럼 windows 사용자들이 syntaxhighlighter를 받는 법을 소개하기 위함이었는데
저 역시 실패했네요. 다시 한 번 시도하여 포스팅 하겠습니다.
결국 github에서 v3.0.83 javascript 파일과 CSS 파일을 직접 다운 받아서 티스토리에 반영했습니다.
TISTORY에 syntaxhighlighter, highlight.js, prism.js 적용하기
저의 경우 3가지를 모두 반영했기 때문에 3가지를 모두 받았지만
3개 중 하나만 적용하실 분은 1, 2, 3번 중에 원하시는 것만 받으시면 됩니다.
1. syntaxghighlighter github에서 다운 받기
URL: https://github.com/syntaxhighlighter/syntaxhighlighter
위의 url로 가서 Branch는 matster를 선택하시고 tags v3.0.83을 선택하여
우측의 [clone or download] 버튼을 클릭하여 zip 파일을 다운 받습니다 .
git에 대한 기본적인 지식이 있다면 알만한 내용일 겁니다.
syntaxhighlighter-3.0.83.zip파일은 다운 받았다면 압축을 푸시고
아래의 2가지 폴더만 사용할 예정입니다.
2. highlight.js, prismjs 다운받기
URL : https://highlightjs.org/download/
URL : https://prismjs.com/download.html
위의 URL들어가서 필요한 개발 언어를 선택하여 다운받습니다.
highlight.js의 경우 다양한 CSS와 highlight.pack.js을 받을 수 있고,
prismjs의 경우 prism.css와 prism.js 두개의 파일을 받을 수 있습니다.
3. TISTORY에 반영
이제는 TISTORY로 넘어가보죠.
우선 TISTORY의 스킨 편집 메뉴까지 갑니다.
스킨 편집 메뉴에서 우측의 [html 편집] 버튼을 눌러 html 편집 화면으로 넘어갑니다.
아래와 같이 HTML | CSS | 파일업로드 이렇게 3가지가 나오는데
하단의 추가 버튼으로 script 파일과 CSS 파일을 업로드 합니다.
다시 상단의 HTML을 클릭하여, 기본 html tag를 편집해야합니다.
<head> 와 <body> 부분에 아래와 같이 추가를 해주셔야 합니다.
<!DOCTYPE html>
<html>
<head>
...
<link href="./images/monokai-sublime.css" rel="stylesheet" type="text/css"/>
<link href="./images/shCoreRDark.css" rel="stylesheet" type="text/css"/>
<link href="./images/shThemeRDark.css" rel="stylesheet" type="text/css" />
<link href="./images/prism.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
...
<script src="./images/highlight.pack.js"></script>
<script src="./images/XRegExp.js" type="text/javascript"></script>
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shAutoloader.js" type="text/javascript"></script>
<script src="./images/shBrushBash.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushCSharp.js" type="text/javascript"></script>
<script src="./images/shBrushCss.js" type="text/javascript"></script>
<script src="./images/shBrushGroovy.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushJavaFX.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shBrushPerl.js" type="text/javascript"></script>
<script src="./images/shBrushPhp.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushPowerShell.js" type="text/javascript"></script>
<script src="./images/shBrushPython.js" type="text/javascript"></script>
<script src="./images/shBrushRuby.js" type="text/javascript"></script>
<script src="./images/shBrushSass.js" type="text/javascript"></script>
<script src="./images/shBrushScala.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushVb.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<script src="./images/shLegacy.js" type="text/javascript"></script>
<script src="./images/shLegacy.js" type="text/javascript"></script>
<script src="./images/prism.js" type="text/javascript"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
SyntaxHighlighter.all();
</script>
...
</body>
</html>
이렇게 추가한 후에 저장 버튼을 누르면 반영 완료!!
여기서 주의해야할 점 한가지!!!
syntaxhighlighter의 javascript들 중
<script src="./images/XRegExp.js" type="text/javascript"></script>
<script src="./images/shCore.js" type="text/javascript"></script>
이 2개는 가장 상위에 있어야 한다는 점.!!!
저 2개의 클래스를 아래 다른 javascript들에서 호출을 하게 됩니다.
interpreter 특징이기도 한데
만약 XRegExp.js와 shCore.js가 없을 경우
아래의 다른 javascript들에서 호출을 할 때 에러가 발생하지만
그렇다고 페이지 전체가 로딩이 안되거나 하는 것은 없고
syntaxhighlighter만 에러가 나서 반영이 안되는 경우가 생깁니다.
따라서 꼭 저 2개의 javascript 파일들은 syntaxhighlighter 위에 적어놔야 합니다.
이제 TISTORY에 highlight 라이브러리들이 반영이 되었습니다.
다만 3개를 동시에 적용하여 약간의 부작용이 예상이 되긴 하지만
우선 사용해보고 삭제를 하던가 할 예정입니다
다음 포스팅은 각각의 사용법을 알아보록 하겠습니다.
2018/09/15 - [IT 기억/블로그 관리] - [블로그] 블로그에 소스 코드 이쁘게 올리는 방법 (소스코드 하이라이터, highlighter)