Internet/Tistory

SyntaxHighlighter 소스코드 강조 기능 적용하기

by 1730 2018. 12. 22.

소스코드 하이라이드 기능 적용하기

티스토리 블로그를 하면서 HTML이나 CSS 코드를 공유하는 경우가 종종 생기는데 이를 일반적인 방법으로 작성을 하게 되면 간단한 코드일 경우에는 상관이 없지만 조금만 길어도 복잡하여 알아보기 힘든 경우가 생기게 됩니다.


http://alexgorbatchev.com/SyntaxHighlighter 사이트에서 제공하는 기능으로 영어로 된 사이트이지만 영어를 못하더라도 번역기 등을 이용하여 천천히 둘러보면 사용하는데 큰 불편함이 없이 사용하실 수 있을듯합니다.




SyntaxHighlighter를 사용하기 위해서는 일부 기능들을 불러와야 하는 syntaxhighlighter-3.0.83.zip (https://github.com/syntaxhighlighter/syntaxhighlighter/releases)관련 파일들을 티스토리 블로그에 등록을 하고 사용하거나 호스팅 서버에서 스크립트를 불러와서 사용할 수도 있습니다.



파일을 다운로드하고 다시 올리는 등의 번거로움 없이 사이트에서 제공하는 호스팅을 이용하여 스킨에 일부 코드를 추가해 줌으로써 하이라이트를 적용하는 방법입니다.



적용을 위해서는 관리 > 꾸미기 > 스킨 편집으로 들어가 스킨 편집 모드에서 'html 편집' 버튼을 눌러 줍니다.



<!-- SyntaxHighlighter -->
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css">	
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css">	
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter End -->

편집 모드에서 위 내용들을 <head> 와 </head> 사이에 추가하여주면 사용 준비를 위한 설치 과정은 끝나게 됩니다.



<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css">	
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css">	
<script type="text/javascript">	SyntaxHighlighter.all();</script>

모든 링크가 필수는 아니이며 필수적으로 필요한 코드는 위 4줄정도가 되겠습니다. 



Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


모든 코드를 추가하여 두거나 필요에 의해서 자주 사용하는 것들로만 등록해 두고 사용하여도 됩니다.



<Pre class="brush: xml"> 
코드삽입
</pre>

코드가 헤더에 등록되고 나면 글 작성하면서 본문에 코드 부분을 <Pre></pre> 사이에 넣어주면 됩니다. 이때 삽입된 코드 스타일에 따라 맞는 class="brush: xml", class="brush: plain"등으로 적용하여 줍니다.



<pre class="brush: js; first-line: 10; highlight: [12, 14]">

</pre>

위와 같이 적용하면 'brush: js' 자바스크립트이며 'first-line' 시작 번호는 10번부터 'highlight: [12, 14]' 12번 14번 줄은 강조하여 노출됩니다. 



<script type="text/javascript">
    SyntaxHighlighter.all();
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.defaults['toolbar'] = false;		
</script>

기능 설정을 개별적으로 매번 적용하는 게 번거롭거나 모든 내용에 동일하게 적용할 경우 헤더에 적용된 메인 코드에서 위 3, 4번처럼 추가하여 주면 모든 SyntaxHighlighter가 동일하게 적용이 됩니다.



<style>
.syntaxhighlighter { padding-bottom: 1px!important; }
</style>

기본적으로 세로 스크롤이 생성되는데 가로 스크롤은 크기에 따라 사라지는 가변형인데 반해 세로 스크롤은 크게에 관계없이 생겨나는 고 정형이라 별도로 수정을 해주었야먄 제거가 됩니다. 위 코드를 HTML에 최하단 등 적당한 위치에 적용하거나 <style> 태그를 재거하고 CSS 적용해주면 스크롤이 사라지게 됩니다.


그외 많은 기능과 어두은 배경을 사용하는 다양한 테마등을 제공합니다. 


- 소스코드 깔끔하게 표현하기 [Color Scripter]