Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

IT창고

티스토리 소스코드 넣기 본문

정리

티스토리 소스코드 넣기

방구석여포 2017. 8. 7. 23:32

다른 블로그의 글로 찾아보며 소스코드 넣는법을 배웠는데 봐도 이해가 안되서 몇 시간동안 고생한 적이 있어 한번 자세하게 글을 써봅니다.  (2017.08.07일 작성 기준)

 

우선 소스코드를 보기 좋게 하는 플러그인을 받아야합니다.

syntaxhighlighter_3.0.83.zip

 

폴더에 압축을 풀면 안에 scripts폴더와 styles폴더가 있습니다.

 

이 두폴더를 티스토리 관리자 페이지로 가면

 

위의 사진과 같은 목록이 있는데 HTML/CSS편집을 누릅니다.

인터넷 익스플로러에 http://???.tistory.com/admin/skin/edit/가 뜨면서 편집을 할수있는데 우선 파일업로드에서 아까 압축을 풀었던 폴더중 scripts(28개파일), styles(17개파일) 안에 들어있는 파일을 모두 업로드 해줍니다 아래 추가를 클릭하면 업로드창이 나옵니다. 

 

파일을 모두 업로드했다면 HTML로 넘어가서 수정해줍니다.

 

아래 사진을 보면 21번째 줄에</head>가 있습니다 여기서 20번쨰줄에

 

<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/shCoreRDark.css">

<script type="text/javascript">SyntaxHighlighter.all();</script>

 

이 코드를 복사해서 붙여넣기 하시면됩니다.

 

20번째 줄에 위에 소스를 복사해서 붙여넣으셨다면

22번째 줄에 <body>를 수정해주셔야합니다.

초기<body>는 <body id="tt-body-page">로 되있으실텐데 거기에 붙여 Onload="dp.SyntaxHighlighter.HighlightAll('code');" 을 추가하시면됩니다. 아니면

 

<body id="tt-body-page" Onload="dp.SyntaxHighlighter.HighlightAll('code');">

 

위에 글을 복사 붙여넣기 하시면 됩니다.

 

준비는 끝났습니다.

 

실행하는 법은

글쓰기에 들어갑니다.

 

위에 빨간원 안에 HTML이 있는데 이걸 누르면

이런 식으로 나타납니다. 이곳에 원하는 자리에

<pre class="”brush:프로그래밍언어”">

소스코드

</pre>

형식으로 넣어주시면 됩니다.

 

** brush: 이곳에 원하는 프로그래밍언어를 넣어주시면 됩니다.

ex) <pre class="”brush:python”">

 

예를 들어 파이썬으로

a ='Hello'
b = 'wocd'
c= a," ",b
print(c)
을 소스코드를 적용하는 방법은 HTML에 들어가서

위의 사진과 같이 넣어주시면 됩니다 그러면 글작성 창에 보이는 모습은

이런식으로 회색창 안에 들어가있어 오류라고 생각하기 쉽지만 미리보기로 한번 보면

정상적으로 적용되어 있습니다.

 

a ='Hello'
b = 'wocd'
c= a," ",b

 

여기까지 syntaxhighlighter플러그인 사용방법 이였습니다.

저작자표시 비영리 동일조건

'정리' 카테고리의 다른 글

노트북 L7S-162SUP 구매후기  (0) 2018.05.11
코드게이트(CodeGate) 2018 후기  (0) 2018.04.08
[공기청정기] 피스넷에어 사용후기  (1) 2018.01.06
2017 제4회 앱쇼코리아 후기  (0) 2017.12.22
윈도우7 공유폴더 설정하는 법  (0) 2017.08.09
공유하기 링크
'정리' Related Articles more
Comments