본문 바로가기
Useful/알아두면 유용한

블로그에 소스코드 넣기 syntaxhighlighter, code-prettify

by Nov19 2018. 12. 18.
반응형


블로그에 소스코드 예쁘게 넣기 syntaxhighlighter, code-prettify


블로그에 소스코드를 예쁘게 넣는 방법.

이라기 보다 소스코드처럼 보이게 해줄 js와 css를 추가 하는 방법이다.


티스토리는 스킨편집에서 파일을 올리거나 html을 수정할 수 있기 때문에 

몇가지 파일을 올리고 html파일을 수정하는 간단한 작업으로 소스코드 처럼 보이는 효과를 볼수 있다.


여기서는 두가지 방법을 소개한다.


1. code-prettify 구글 코드 프리티파이

일단 css나 html을 수정하고 js, css 파일을 올릴 수 있는 스킨편집으로 들어간다.


오른쪽 자신의 스킨을 편집 할 수 있는 html 편집으로 들어간다.



HTML CSS 파일업로드 세가지로 나뉘어 있는데 HTML 탭에서

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>


위 태그를 <head> 태그안에 넣어준다.

코드 프리티파이를 cdn으로 가져와서 사용하겠다는 의미이다.

코드 프리티파이는 5개의 테마가 있는데 이를 

https://rawgit.com/google/code-prettify/master/styles/index.html

여기로 들어가보면 확인할 수 있다.

default, desert, sunburst, sons-of-obsidian, doxy가 있다.

스킨을 적용하려면 

다음과 같이 skin=skin_name 처럼 원하는 스킨을 입력하면 된다.

sunburst 스킨이 괜찮아 보여 사용해 보겠다.

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>




사용방법은 간단하다. 

글을 작성할 때 오른쪽 상단의 HTML에 체크하고 html 코드를 넣으면 된다.

다음과 같이 <pre> 태그 안에 코드를 넣으면 되고

pre 태그 클래스 속성에 prettyprint와 사용할 언어를 lang-* 라인에 숫자를 붙이고 싶으면 linenums를 붙여주면 된다.

라인넘버는 linenums:1 이런식으로 사용하면 시작할 숫자를 1부터하겠다는 의미이다.




<pre class="prettyprint lang-py linenums">code.........</pre>

def add_method():
    num1 = input()
    num2 = input()
    return num1+num2

def mul_method():
    num1 = input()
    num2 = input()
    return num1*num2

다음과 같은 언어들을 사용할 수 있으며 lang- 뒤에 사용할 언어를 붙여주면 된다.


<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>


자세한 정보는 여기에서 https://github.com/google/code-prettify


2. syntaxhighlighter

여기서는 3.0.83 버전을 쓴다. 

syntaxhighlighter v4가 나왔지만 빌드해서 써야 하는데 이건 나중에 직접 서버 운영할 때나 해봐야겠고

지금은 3.0.83 버전으로 해본다.

syntaxhighlighter_3.0.83.zip

파일을 다운로드 하고 다음과 같이 scripts폴더와 styles 폴더 내의 모든 파일을 업로드 한다.


스킨편집 > 파일업로드 탭으로 들어가서 추가 버튼을 누르고 파일을 업로드 하고 저장을 누른다.


scripts 폴더에는 브러시로 쓸 자바스크립트 파일들이 모여있다.

shBrushJava.js 파일은 소스코드를 자바의 디자인처럼 보여지게한다.

자신이 쓰고 싶은 파일만 업로드 하면된다. shAutoloader.js, shCore.js, shLegacy.js 이 파일은 

꼭 업로드해야 한다.

일단 다 업로드 하는걸로!


styles 폴더에는 테마에 대한 css 파일들이 있다. default, django, eclipse, Emacs등의 테마가 있다.

가령 eclipse테마를 사용한다면 이클립스에서 작성한 것 처럼 보여지게 한다.

이것도 일단 다 업로드한다.




업로드 한 뒤 HTML 탭으로 가서 다음과 같이 업로드한 파일을 사용하겠다고 선언해줘야 한다.

다음과 같이 테마로 쓸 css파일을 먼저 적어준다. 디폴트 테마를 사용하겠다면 

<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css">를 쓰면 된다.


<link rel="stylesheet" type="text/css" href="./images/shCore.css">
<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css">


그리고 사용할 브러시 파일들을 적어준다. 자신이 필요한 브러시만 올려주면 되겠다.


<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript"> SyntaxHighlighter.all();</script>





사용법은 다음과 같다.

<pre> 태그안에 코드를 작성하면 되는데

브러시에 사용할 언어만 brush:뒤에 적어주고 클래스 속성에 명시해 주면 된다. 

<pre class="brush:py">code.....</pre>



def add_method():
    num1 = input()
    num2 = input()
    return num1+num2

def mul_method():
    num1 = input()
    num2 = input()
    return num1*num2


반응형

댓글