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> |
이렇게 나옵니다. 그리고 미리보기 버튼을 누르면
짠!! 이렇게 코드를 넣을 수 있습니다.
<link type="text/css" rel="stylesheet" href="./images/shThemeMidnight.css">
여기에 원하는 테마를 불러오면 사용할 수 있습니다.
어떤게 편한지는 개인의 취향이지만 이글을 쓰면서 두개 다 써보니 첫번째가 편한거 같기도 하네요..
경우에 따라서 < > 이것이 겹치기도 하고 그래서 < > 를 이용한다고 합니다 스킨에서 겹침현상이..
<pre>태그를 이용하는것도 중복 현상과 줄바꿈으로 textarea를 사용하였습니다.
이제 맘에드는 방법을 골라서 소스코드를 붙여넣을 수 있습니다~