이번에는 개발에 관련된 프로그램 코드들을 깔끔하게 포스팅글에 적용을 위한 방법을 소개하고자 합니다.
개발코드를 마치 에디터에서 적용한듯한 효과를 내기위해서는
"Syntaxhighlighter" 를 이용하여 적용하면 되겠습니다.
그럼 다운로드부터 적용하는 과정까지 작성을 해보겠습니다.
사이트방문하여 파일 다운로드받기
http://alexgorbatchev.com/SyntaxHighlighter/download/
접속 후 오늘날짜 기준 최신인 3.0.83 버전을 다운로드 받도록 하겠습니다.
파일을 받으셨다면
폴더(SCRIPTS / STYLES)내에 있는 파일들을 모두 업로드 하도록 합니다.
업로드가 완료되셨다면 HTML/CSS 탭으로 이동하셔서 다음 코드를 작성해주도록 합니다.
<head>태그 사이에 넣어줄 태그
<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css"/>
상단 코드에서 href부분에 ./images/shCorexxxx.css 는 코드디자인 스킨인대요.
저는 임의로 이클립스 테마를 적용한 것이고 올리신 css파일들을 변경하고 적용하셔서
본인이 마음에 드시는 테마로 설정 잡아주시면 되겠습니다 ^^
</body>상단에 넣어줄 태그
<script type="text/javascript" src="./images/shCore.js"></script> <!-- 액션스크립트 --> <script type="text/javascript" src="./images/shBrushAS3.js"></script> <!-- 쉘 --> <script type="text/javascript" src="./images/shBrushBash.js"></script> <!-- C프로그래밍 --> <script type="text/javascript" src="./images/shBrushCpp.js"></script> <!-- CSS --> <script type="text/javascript" src="./images/shBrushCss.js"></script> <!-- 델파이 --> <script type="text/javascript" src="./images/shBrushDelphi.js"></script> <!-- JAVA --> <script type="text/javascript" src="./images/shBrushJava.js"></script> <!-- JAVAFX --> <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> <!-- PHP --> <script type="text/javascript" src="./images/shBrushPhp.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/shBrushScala.js"></script> <!-- SQL --> <script type="text/javascript" src="./images/shBrushSql.js"></script> <!-- 비주얼베이직 --> <script type="text/javascript" src="./images/shBrushVb.js"></script> <!-- XML --> <script type="text/javascript" src="./images/shBrushXml.js"></script> <!-- SyntaxHighlighter 호출 --> <script type="text/javascript">SyntaxHighlighter.all()</script>
상단부분외에도 더 많은 JS파일들이 있지만
어떤 코드를 작성할때 사용되는 스크립트인지 몰라서 아는것만 작성해보았습니다.
모두 INCLUDE하실필요는 없고 작성에 필요한 JS파일들만 INCLUDE 하시면 되실거 같습니다.
사용법
사용하는 방식은 포스팅 작성시 등록하시려는 코드들을 <pre></pre>태그내에 작성을 해주시면 되는데
pre태그 속성에 다음과 같이 속성을 정해주셔야 합니다.
<pre class="brush:적용할코드alias">
// 코드
</pre>
위의 규격에 맞춰주시면 됩니다.
"적용할코드alias"는 하단 링크를 통해서 참고하시면 되실거 같습니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
※ 코드적용시 주의해야 할 사항은 꺽쇠들을
< 일경우에는 <
> 일경우에는 >
라고 치환들을 해주셔야 합니다.
스크립트 코드를 예를들어보면
<pre class="brush:html;">
<input type="text" />
</pre>
이런 형식으로 적용해주셔야 합니다.
실제 상단 코드의 결과를 보시면
<input type="text" />
위처럼 나오게 되는거죠.
그럼 유용하게들 사용하세요~
by 개발로짜
'블로그팁' 카테고리의 다른 글
| 내 블로그를 네이버 검색등록을 이용하여 검색에 노출시키자 (0) | 2014.10.06 |
|---|---|
| 네이버 이웃추가로 티스토리 블로그 방문수를 늘려보자 (2) | 2014.10.04 |
| 구글 페이지스피드 인사이트로 티스토리 블로그 로딩속도 평가하기 (0) | 2014.10.04 |
안녕하세요 개발로짜입니다 ^^
이번에는 네이버 블로그가 아닌 그외의 블로그(티스토리,이글루스,다음블로그 등등...)의 경우
네이버 검색에서 잘 노출이 되지 않습니다.
저번에도 말씀드렸다시피 약 70% 이상이 네이버 검색을 이용한다고합니다.
그러기위해서 네이버 검색등록은 필수라고 말씀드리고 싶네요 ^^
쉽게 따라하시게 이미지로 설명을 추가해보았습니다 !
네이버 메인화면 하단에 보시면 검색등록이라는 메뉴가 있습니다.
클릭!
검색등록 페이지에서 신규등록 메뉴 클릭을 해서 페이지를 이동해줍니다.
신규등록메뉴에서 세번째 등록신청을 눌러줍니다.
원래 홈페이지 검색등록은 첫번째이지만 일반 블로그이므로 그냥 세번째 등록신청 클릭!
상단 네모표시되어있는 URL영역에 자신의 블로그 주소를 입력합니다.
저같은 경우에는 제 블로그 주소인 'http://hellogk.tistory.com' 입력하였습니다.
그런다음 중복확인버튼 클릭!
중복확인을 하게되면 하단에 추가로 내용이 출력됩니다.
마지막으로 웹문서 검색신청을 누르게되면
본인의 네이버메일로 신청완료 메일이 발송이 되었을것입니다.
등록신청이 끝났습니다!
이후에는 검색에 노출여부는 메일이나 핸드폰 문자로 승인여부를 전달해준다고 합니다.
앞으로 기다릴 일만 남았습니다
저도 오늘 신청했는데 승락인지 거부인지 기다려봐야겠네요 ^^
by 개발로짜
'블로그팁' 카테고리의 다른 글
| 티스토리에 syntaxhighlighter 설치 및 반영하여 소스코드 깔끔하게 적용하기 (0) | 2014.10.10 |
|---|---|
| 네이버 이웃추가로 티스토리 블로그 방문수를 늘려보자 (2) | 2014.10.04 |
| 구글 페이지스피드 인사이트로 티스토리 블로그 로딩속도 평가하기 (0) | 2014.10.04 |
검색의 70%이상이 네이버 검색을 이용한답니다.
검색해서 자신이 얻고자 하는 정보를 얻었다면?
대부분 정보만 얻고 블로그를 나가기 다반사입니다.
바로!! 검색하고 들어온 방문자들을!!!
나의 이웃으로 끌어들이기 위한 방법중 하나라고 생각이 됩니다.
네이버 이웃추가 위젯의 장점은
'타블로그(티스토리,다음블로그,이글루스 등등..) 도 가능하다'라는 것입니다.
만약 내 블로그에 이웃추가 위젯을 설치하고 누군가 위젯을 통해 이웃으로 추가했다면?
네이버 구독에서 해당 블로거가 등록한 포스팅을 실시간으로 구독이 가능합니다.
위에서 보시다시피 제가 이전에 관리했던 블로그의 이웃을 추가하여 네이버 me에서 구독중인 임시 화면인거죠
이웃추가를 해놓고 본인이 원하는 정보의 글이 등록되었다면?
정확히 어떠한 글인가~ 하고 방문을 하겠죠?
그렇게 된다면 자연스레 블로그의 방문자들이 하나,둘 증가가 될것이라 생각되네요 ㅎ
그럼 본격적으로 이웃추가 위젯을 만들어서 코드발급하는 과정까지 알려드리겠습니다.
네이버 로그인 후 블로그URL접속(http://section.blog.naver.com/)
이웃관리 문구를 클릭
이웃커넥트 관리하기 버튼 클릭
위젯관리 메뉴클릭
위젯코드 생성복사하기
위와같이 스크립트 코드가 생성되면 복사 한다음 본인의 블로그에 원하는 위치에 붙여넣기를 하기만 하면됩니다.
본인의 블로그에 해당 코드를 붙여넣기 한 동작화면은 다음과 같습니다
위와같이 정상적으로 사이드바에 위젯이 추가되었습니다.
하지만 본인이 원하는 위젯화면이 아니여서 다른 타입의 종류로 변경을 해보도록 하겠습니다.
이웃커넥트 관리하기 버튼 클릭후 첫번째 화면에서 다음 하단화면처럼
적용옵션들을 설정 후 저장버튼을 클릭해줍니다.
블로그에 설치된 위젯을 다시한번 확인해보도록 하시죠
위젯 변경은 되었으나 코드를 재발급 받으라는 메시지가 나온답니다.
이럴경우는 상단에 위젯관리 메뉴화면으로 이동하셔서
본인이 방금 등록하신 블로그 URL의 코드 재발급 버튼을 클릭후
생성된 스크립트 코드를 블로그에 등록했던 스크립트 코드에 덮어주시면 되겠습니다.
정상적으로 변경이 완료되었네요
티스토리에서도 이웃관리를 통해서 기존방문자들을 잡으시길...!!
by 개발로짜
'블로그팁' 카테고리의 다른 글
| 티스토리에 syntaxhighlighter 설치 및 반영하여 소스코드 깔끔하게 적용하기 (0) | 2014.10.10 |
|---|---|
| 내 블로그를 네이버 검색등록을 이용하여 검색에 노출시키자 (0) | 2014.10.06 |
| 구글 페이지스피드 인사이트로 티스토리 블로그 로딩속도 평가하기 (0) | 2014.10.04 |