'티스토리'에 해당되는 글 1건

  1. 2017.04.14 나도 티스토리에 예쁘게 소스코드 넣자!



1
2
3
4
5
public void main(String args[]){
 
    System.out.println("Hellow world");
 
}
cs


1
2
3
function test(){
    console.log("Hello world");
}
cs





개발 관련 블로그들을 보며 위와 같은 잘 꾸며진 코드 스타일들을 따라하려 


글쓰기 메뉴에서 신나게 찾아봐도.. 없다..


역시나 구글에 찾아보니 바로 나온다.


방법은 두가지가 있다.


1. Color Scripter


2. Syntax Highlighter



1. Color Scripter의 경우 https://colorscripter.com/ 사이트 접속을 통하여 복사 붙여넣기만 하면 되는 간편함이 있다. 하지만 매번 사이트를 접속해야 한다는 약간의 수고가 있다.


위와 같이 언어를 선택하고 기본 스타일패키지 등 여러 설정을 한 후 클립보드에 복사 를 통하여 복사하자!!


저처럼 멍청하게 ctrl+c 로하니깐 줄번호 등은 안딸려 오더라고요. 큰 화면으로 봤을때 저 버튼이 화면 아래에 있어서 잘 안보였음...


아무튼 상당히 간단합니다. 


1
2
3
function test(){
    console.log("Hello world");
}
cs


요렇게




2. Syntax Highlighter는 티스토리만의 장점을 살려서 css파일과 js파일을 집접 불러와서 설정을 


해줘야 합니다. 장점은 수고스러운 위의 작업을 거치면 이후에는 글쓰기만으로 코드효과를 볼 수 있


다는 장점이 있겠습니다. 또 코드를 직접 수정도 할 수 있겠죠!


Syntax Highlighter를 사용하기 위해서는 먼저 다운받아야 합니다.


기존 다른 블로거님들을 따라서 다운로드 사이트에 들어가니 페이지가 없어졌더군요.. 


http://alexgorbatchev.com/SyntaxHighlighter/ 페이지로 들어가서 download 해보니 이전까지의


설명과 다른구조로 되어 있습니다. 파일 구하느라 고생했네요..ㅠㅠ


syntaxhighlighter_3.0.83.zip


압축을 풀고



두개의 폴더를 관리자 페이지로 들어가서 꾸미기 > HTML/CSS 편집 메뉴로 들어갑니다

             



scripts, styles 폴더에 있는 파일들을 추가해줍니다. 그리고 HTML 메뉴로 이동하여



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
<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/shThemeMidnight.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
 
</head>
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
cs


</head> 태그 전에 위에 코드들을 삽입해 주시고


<body>태그에도 코드를 삽입해 주어 textarea태그를 사용할 수 있도록 설정해 주었습니다.


마지막으로 저장! 하고 끝~


HTML을 체크해 준 후

1
2
3
4
5
<textarea name="code" class="brush:js;">
function test(){
   alert("test);
}
</textarea>


cs


brush:(언어)를 js로 설정해 주었습니다.

그리고 html태그를 풀면

이렇게 나옵니다. 그리고 미리보기 버튼을 누르면


짠!! 이렇게 코드를 넣을 수 있습니다.


<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">



여기에 원하는 테마를 불러오면 사용할 수 있습니다.


어떤게 편한지는 개인의 취향이지만 이글을 쓰면서 두개 다 써보니 첫번째가 편한거 같기도 하네요..


경우에 따라서 < > 이것이 겹치기도 하고 그래서 &lt;  &gt; 를 이용한다고 합니다 스킨에서 겹침현상이..


<pre>태그를 이용하는것도 중복 현상과 줄바꿈으로 textarea를 사용하였습니다.




이제 맘에드는 방법을 골라서 소스코드를 붙여넣을 수 있습니다~





'티스토리' 카테고리의 다른 글

나도 티스토리에 예쁘게 소스코드 넣자!  (0) 2017.04.14
Posted by 건강코더 트랙백 0 : 댓글 0