코학다식

웹 사이트에 소스 코드 보기 좋게 올리기 :: Syntax highlighter/Color scripter 본문

코학/코다익선

웹 사이트에 소스 코드 보기 좋게 올리기 :: Syntax highlighter/Color scripter

copeng 2019. 7. 11. 00:07

 안녕하세요. 오늘은 웹 사이트에 소스 코드를 예쁘게, 보기 좋게 올리는 방법에 대해서 알아보려고 합니다. 저번 포스팅에서 사용한 티스토리에 기본으로 있는 코드블럭이 너무 안 예뻐서 쓰는 포스팅입니다. 웹 사이트에 소스 코드를 올리고 싶을 때 코드를 그대로 복붙 해서 올리면 들여쓰기도 엉망이 되는 경우가 많고, 텍스트 에디터들처럼 깔끔하고 문법이 강조된 채로 올릴 수도 없죠. 그럴 때 syntax highlighter, 혹은 color scripter를 사용하면 소스 코드를 보기 좋게 올릴 수 있습니다.  

 Syntax Highlighter

 

 먼저 syntax highlighter의 사용법에 대해 알아보도록 하겠습니다. Syntax Highlighter v3.0.83 파일을 CDN로 이용하여 설치하고 사용하는 방식이 가장 간단하기 때문에 이 방식을 소개해 드리도록 하겠습니다. 순서는 다음과 같습니다.

 

 CDN :: https://cdnjs.com/libraries/SyntaxHighlighter

 

  • 블로그 관리 홈 -> 꾸미기 탭의 스킨 편집 -> 스킨 편집의 html 편집 클릭

  • head 태그(<head>) 아래에 다음 코드 삽입

<!-- 필수 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
<!-- 테마 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css">
<!-- 필수 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>

<!-- 지원 언어 -->
<!-- applescript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js"></script>
<!-- as3, actionscript3 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js"></script>
<!-- bash, shell -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script>
<!-- cf, coldfusion -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js"></script>
<!-- cpp, c -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
<!-- c#, c-sharp, csharp -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js"></script>
<!-- css -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<!-- delphi, pas, pascal -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js"></script>
<!-- diff, patch -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js"></script>
<!-- erl, erlang -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js"></script>
<!-- groovy -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js"></script>
<!-- java -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<!-- jfx, javafx -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js"></script>
<!-- js, jscript, javascript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<!-- perl, pl -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js"></script>
<!-- php -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js"></script>
<!-- plain, text -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<!-- ps, powershell -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<!-- py, python -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script>
<!-- rails, ror, ruby -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js"></script>
<!-- scala -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js"></script>
<!-- sass scss -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js"></script>
<!-- sql -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js"></script>
<!-- vb, vbnet -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js"></script>
<!-- xml, xhtml, xslt, html, xhtml -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>

<!-- 초기화 -->
<script type="text/javascript">
/* config */
SyntaxHighlighter.config.bloggerMode = false;
/* http://alexgorbatchev.com/Syntaxighlighter/manual/configuration/strings.html 참고 */
SyntaxHighlighter.config.strings = Object;
/* &amp;amp;amp;lt;br /&amp;amp;amp;gt; 무시 */
SyntaxHighlighter.config.stripBrs = false;
/* 사용할 태그 지정, default는 pre */
SyntaxHighlighter.config.tagName = 'pre';

/* defaults */
/* URL 링크 여부 */
SyntaxHighlighter.defaults['auto-links'] = true;
/* css class를 이용해 style 변경 */
SyntaxHighlighter.defaults['class-name'] = '';
/* code 접기 */
SyntaxHighlighter.defaults['collapse'] = false;
/* 시작 라인 번호 */
SyntaxHighlighter.defaults['first-line'] = 1;
/* 라인 번호 숨김 */
SyntaxHighlighter.defaults['gutter'] = true;
/* 라인 강조 */
SyntaxHighlighter.defaults['highlight'] = null;
/* html 강조 여부, shBrushXml.js 필요 */
SyntaxHighlighter.defaults['html-script'] = false;
/* 탭 조정 */
SyntaxHighlighter.defaults['smart-tabs'] = true;
/* 탭 사이즈 */
SyntaxHighlighter.defaults['tab-size'] = 4;
/* 툴바 표시 */
SyntaxHighlighter.defaults['toolbar'] = true;
/* 라인 번호 앞 0 */
SyntaxHighlighter.defaults['pad-line-numbers'] = false;
/* 더블 클릭으로 코드 선택 여부 */
SyntaxHighlighter.defaults['quick-code'] = true;
     
SyntaxHighlighter.all();
</script>

 

 이렇게 간단한 과정을 거치고 나면 준비는 끝이 납니다. 참고로, 위의 코드는 (언어를 제외하고) 모두 default 값입니다. 취향에 따라 변경하시면 되겠습니다. default 테마는 보시는 그대로입니다. 다른 테마는 아래의 링크에서 확인하실 수 있습니다. 마음에 드는 테마가 있다면 테마 코드를 수정하면 됩니다. 

 

 Theme :: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html

 

 준비가 끝났으니 이제 직접 코드를 작성해 볼 차례입니다. 글쓰기 편집 창에서 html 모드로 변경한 뒤, 다음과 같이 코드를 작성하면 됩니다. brush-name에는 언어의 이름이 들어갑니다. 특정 언어를 사용하기 위해 어떤 brush name을 사용해야 하는지는 다음 링크에 나와 있습니다. 대부분 언어 이름을 그대로 쓰거나 줄임말을 쓰는 형식입니다. pre 태그를 사용할 때 < 와 > 문자는 &lt;와 &gt;로 바꿔 주어야 하는데, 블로그의 웹 에디터는 알아서 변경해 주므로 블로그에 쓸 경우에는 그대로 쓰시면 됩니다.

 

 Brush-name :: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

 

 

<pre class="brush:brush-name">
/* Write code here */
</pre>

Color Scripter

 

Color Scripter의 경우에는 사용법이 훨씬 간단합니다. 사이트에 접속해서 원하는 언어와 테마를 선택해 준 뒤, 코드를 작성하여 클립보드에 복사하거나 붙여넣거나 html을 복사하여 글쓰기 편집 창에서 html 모드로 변경해 준 뒤 그대로 붙여넣으면 됩니다. 

 

 Color Scripter :: https://colorscripter.com/

 

Color Scripter

Simple & Flexible Syntax HighLighter

colorscripter.com

 

Color Scripter

#include <stdio.h>
 
int main(void){
    printf("Hello World!");
}
 cs

 

 위 캡처 화면에 작성된 그대로 html을 복사해서 붙여넣은 결과입니다. 코드를 올릴 일이 그다지 많지 않다면 Color Scripter를 사용하는 게 훨씬 간단하겠네요.

 이상으로 웹 사이트에 소스 코드를 보기 좋게 올리는 방법에 대해 알아보았습니다. 저는 Color Scripter의 서브라임 블랙 테마가 마음에 드는데 Syntax highlighter에는 저런 테마가 없어서 슬프네요.

'코학 > 코다익선' 카테고리의 다른 글

CSS Basics  (0) 2020.09.01
소스 코드 이미지 파일로 만들기 :: Carbon  (0) 2019.09.23
[IT 행사] 네이버 오픈클래스 2019 후기  (0) 2019.08.31
코딩, 프로그래밍, 컴퓨터공학 관련 강의 사이트 모음(2019.08.23 ver)  (0) 2019.07.13
'코학/코다익선' Related Articles more
Comments