티스토리 뷰

Blog

티스토리에 소스코드 하이라이트 적용하기(Syntax Highlighter)

Zadd 2018. 7. 19. 09:13

블로그에서 여러 프로그래밍 소스코드 들을 읽기 쉽게 만들어준다.

오픈 소스 라이센스기 때문에 누구나 사용할 수 있다는 것도 장점이다.

단, 자바스크립트를 사용하기 때문에 티스토리 같은 자바스크립트 사용 가능 한 곳에서만 사용가능

(네이버 블로그 안됨.)



* 위에 그림을 클릭하면 해당 사이트로 접속이 가능하다.


1. 파일 다운 받아 압축 풀기


  • 위에 그림을 클릭하여 오피셜 페이지로 들어가서 다운받는 방법이 있다.
  • 그냥 받고 싶은사람 : https://winx.kr/SwlPid1

2. 티스토리 스킨 편집하기


  • 블로그 관리 - 꾸미기 - 스킨편집으로 들어간다.


3. 파일 업로드하기


  • 스킨편집 창에서 우측 상단에 있는 'html 편집' 클릭


  • '파일 업로드' 클릭 하고 아래 추가 버튼 클릭


  • 압축 해제 한 폴더에서 scripts, styles 폴더에 있는 내용 전부 추가하기



4. HTML에 하이라이트 설정하기


  • HTML 편집 - HTML에서 <head>와</head>사이에 아래와 같은 코드를 추가한다.
  • 필자는 </head> 바로 전에 추가하였다.
<!-- Syntax Highlighter -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.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>
	
<link href="./images/shCore.css" rel="stylesheet" type="text/css" />
<link href="./images/shThemeEmacs.css" rel="stylesheet" type="text/css" />
	
<script type="text/javascript">
  SyntaxHighlighter.bloggerMode = true;
  SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기
  SyntaxHighlighter.defaults["auto-links"] = false; // 자동 링크없애기
  SyntaxHighlighter.defaults["tab-size"] = 2; // 탭사이즈를 2로 설정
  SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter END -->


5. 글에 하이라이트 적용하기


  • 우측 상단에 '저장' 버튼 클릭하여 저장한 후 새 글을 써보자.
  • 글을 쓸때 우측 상단에 있는 HTML 클릭


  • 클릭하여 다음과 같이 코드를 입력한다
<pre class="brush:cpp">
test
</pre>


  • 확인 및 미리보기

1. HTML 해제시



2. 미리보기


이런식으로 적용하여 사용하면 된다!

'Blog' 카테고리의 다른 글

신한은행 외화 송금 받기(PC버전)  (0) 2020.08.24
댓글