블로그에 소스코드 예쁘게 넣기 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'Useful > 알아두면 유용한' 카테고리의 다른 글
| 크롬에서 플래시 항상 허용 설정하기(차단 해제) (0) | 2019.01.24 |
|---|---|
| windows10 메모잇 (메모어플, 메모장, 스티커메모) (1) | 2019.01.09 |
| 인터넷 연결 안될 때 크롬에 나타나는 공룡의 정체 (0) | 2019.01.04 |
| 다크네이머 DarkNamer 파일명 일괄 수정 변경하기 (0) | 2018.12.12 |
| 윈도우 창 화면이 사라졌을 때 (나타나게 하는 방법, 윈도우 창 위치 조절 방법) (0) | 2018.12.06 |
댓글