오늘은 티스토리에 소스코드를 삽입하는 방법을 소개 해 드릴려고 합니다.
네이버 블로그 같은 경우에는
위쪽에 보면 소스코드를 작성하게 되어있는데
티스토리는 그런게 없더라고요
하지만 티스토리의 장점을 이용해 코드를 넣어 보도록 하겠습니다.
SyntaxHighlighter를 사용을 할건데요
이걸 사용하기 위해서는 필요한 준비물이 있습니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
SyntaxHighlighter - Installation
Basic Steps To get SyntaxHighlighter to work on you page, you need to do the following: Add base files to your page: shCore.js and shCore.css Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes) I
alexgorbatchev.com
에 접속을 하게 되면
오른쪽 파란 부분에 다운로드를 눌러 다운로드를 받을 수 있습니다.
홈페이지가 만약에 안들어가질수도 있으니 따로 여기에 파일 올리겠습니다.
블로그 관리에 보면 목록에 이렇게 보이고 있습니다.
꾸미기 -> 스킨 편집 으로 들어갑니다.
스킨 편집에 들어가면 오른쪽에 이 화면이 보일껀데요.
html 편집 버튼을 누르면 밑에 화면처럼 나올것입니다.
여기서 맨 밑에 추가 버튼을 눌러주세요.
파일 받았던 것 중에 scripts , styles 파일에 있는것을 전부 넣어주세요~
HTML 위 탭을 누르면 재 화면과 비슷한게 뜨는데 뭔가 다른점이 있을 것입니다.
저희가 아까 넣었던 js(자바스크립트), 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>
<link rel=" stylesheet" type="text/css" href="./images/shCoreRDark.css">
이게 글쓰기에서 사용해보겠습니다.
이거를 <head> ~ </head>사이에 넣어주세요.
티스토리 글쓰기에서 기본모드에서 HTML 로 바꿔 주세요.
<pre class="brush:sql">
SELECT * FROM DUAL
</pre>
이렇게 넣어 보면 밑에 에 코드로 깔끔하게 나오게 됩니다.
SELECT * FROM DUAL
언어마다 class = " brush : 언어" 을 써야 하므로 밑에 표를 참고해주세요.
'블로그 관리' 카테고리의 다른 글
| 티스토리 네이버에 검색되게 해보자(네이버 웹마스터) (0) | 2020.04.09 |
|---|---|
| 티스토리 구글에 검색에 노출 되게 하기 (0) | 2020.04.09 |
