티스토리 소스코드 테마 적용 따라하기(syntaxHighlighter)

카테고리 없음

티스토리 소스코드 테마 적용 따라하기(syntaxHighlighter)

킨글 2018. 4. 14. 13:20

소스코드 테마를 적용하고 싶었으나, 복잡해 보여서 머뭇거렸거나 혹은 제대로 적용되지 않은 분들에게 추천드립니다.

순서는 다음과 같습니다.

1. 먼저 syntaxHighlighter를 다운받습니다.

2. 티스토리 설정 - 스킨 편집 - html 편집으로 이동합니다.

3. 파일업로드로 이동해서 script, style을 모두 추가합니다.

4. html 코드를 추가해줍니다.

5. 테스트해봅니다.

1. 먼저 syntaxHighlighter를 다운받습니다.

syntaxhighlighter_3.0.83.zip

2. 티스토리 설정 - 스킨 편집 - html 편집으로 이동합니다.

3. 파일업로드로 이동해서 script, style 파일을 모두 추가합니다.

4. html 코드를 추가해줍니다.

4-1) </head>위에 코드를 추가해 줍니다.

4-2) <body id="tt-body-page">에서 Onload를 추가해줍니다.

<head>
...
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.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/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.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 type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeRDark.css">
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body id="tt-body-page" Onload="dp.SyntaxHighlighter.HighlightAll('code');">

5. 테스트해봅니다.

미리보기 시 아래와 같이 표시되면 정상적으로 적용된 것입니다.

만약 스킨을 바꾸고 싶다면

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/eclipse.html 사이트로 들어가서

원하는 테마의 링크를 가져온 후 티스토리 설정 - 스킨 편집 - html 편집으로 이동해서 값을 변경해줍니다.

=> <link type="text/css" rel="Stylesheet" href="/styles/shThemeEclipse.css"/>