2015/05/07

Syntax Highlighter 구 버전으로 회귀


구관이 명관이라는 말이 실감난다. 최신 버전의 Syntax Highlighter를 이 블로그에 적용했었는데 구 버전으로 회귀해야했다. 신 버전은 테마를 사용할 수 있어 깔끔하고, 원저자의 사이트 링크들만 블로그 Template에 복사하면 되었기에 구글 블로그에 적용하기가 매우 편리하다.

그런데, 어제 저녁에 갑자기 내 블로그에 접속이 안되는 일이 발생했다. www.blogger.com에는 접속이 되는데 내 블로그에는 접속이 안되는 황당한 상황이었는데 Firefox가 원인을 알려 주었다. 내 블로그에 접속하려면 Syntax Highlighter 사이트를 거쳐와야 했는데 거기에 접속이 안되니까 내 블로그에도 접속이 안되는 상황이 발생한 것이다. 해킹을 당한건지 서버가 망가진건지 알 수 없지만 지금도 해당 사이트로는 접속이 안된다.

내 발등에 떨어진 불을 끄기 위해 신버전의 Syntax Highlighter를 걷어내야 했다. 그리고 구버전을 설치했다. 구 버전에서도 링크를 병행해서 사용해야 하지만 syntaxhighlighter.googlecode.com 링크를 사용하기 때문에 상대적으로 안전하다. 문제는 구버전과 신버전 tag가 달라서 예전에 올린 글들을 일일이 수정해야 하는데 귀찮아서 모두 수정할수 있을지 장담하기 어렵다.

요즘 알게 모르게 Cloud 환경을 많이 사용하고 있는데 구글 같은 대형 사이트가 아니면 언제든지 유사한 일을 당할 수가 있다. 뭐, 구글같은 사이트도 정책이 바뀔 수도 있으니 아무튼 미래에도 Cloud 환경이 안전하다고 맹신하면 안될 것이다. 전에 iPhone을 애들이 갖고 놀다가 비밀번호를 바꿨는데 기억을 못하는 바람에 iOS부터 새로 설치해야 했던 적이 있는데 다행히 iCloud를 사용하고 있어서 중요한 데이터가 거의 완벽히 복구된 적이 있었다. 그런 면에서 Cloud 환경이 편리한 것도 사실이다. 하지만, Syntax Highlighter 문제와 같이 Cloud 환경의 위험성에 대해서도 경각심을 가져야 할 것이다.

구 버전의 Syntax Highlighter 설치 방법은 stackoverflow.com에 올라와 있는데 Backup 차원에서 이 글에 다시 남긴다.

1. 먼저, blogger template을 백업

2. http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css의 파일 내용을 </b:skin> tag 앞에 복사

3. 아래 내용을 </head> tag 앞에 복사: 필요한 brush 파일만 선택
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
4. 아래 내용을 </body> tag 앞에 복사
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5. blogger template 저장

6. 사용 방법은 아래와 같이 <pre name="code" class=cpp></pre> tag 사용
<pre name="code" class="cpp">
int x = 0, y = 10;
</pre> 
7. 사용 가능한 Brush class: cpp, csharp, css, delphi, java, js, php, python, ruby, sql, vb, xml

댓글 없음:

댓글 쓰기