이번에는 제가 블로그를 계속 바꾸고 바꾸고 변경하고 변경하고(?)를 반복 하다 보니까~ ㅋㅋㅋ
뭔가 멋을 알게됬나봐요~ 조금더 개발자가 되간다는 느낌(?)
사실상 ㅋㅋㅋ 티스토리에서 이모티콘을 조금 제공해줘서, 많이 밋밋해서요 ㅠㅠ
쓸데없는 카카오톡 이모티콘을 어디서 가져왔는지는 있다 보세요.ㅋㅋㅋ
자! 그럼 한번 해볼까요? 조금더 개발자 다워지는 일을~
우선 다른 블로그 가셨을때, 뭔가 진짜 개발자인거 같은, 프로그래밍 프로그램을 실행한거 같은 그런 것 느껴 보셨을 겁니다.
바로 이런겁니다.
바로 이런 것 말이죠~ 우리도 이제 할 수 있습니다!
제가 다른 블로그들을 찾아 봤지만 대부분의 블로그들은 다 뭘 설치하고, 다운받고 넣고 막 그러더라구요~
저는 우연히 보았습니다. 바로 그냥 코드만 있으면 되는 것을~
작업 하실 준비가 되셨습니까? 그럼 한번 진행해보죠~
우선 티스토리 관리 페이지에 들어가셔서 html/css 편집기에 접속 해줍니다.
여기서 HTML탭에 보시면 막 head도 있고 title도 있고 body도 있는데 우리가 필요한 것은 바로 head부분 입니다.
head부분에 입력해줍시다. ~
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css">
<script type="text/javascript">SyntaxHighlighter.all();</script>
이 코드를 그대로 head부분에 복사 붙여넣기 해줍니다. 이제 어떻게 하나? 그냥 끝났네요 ㅋㅋㅋㅋ 저장하고 사용해 봅시다.
저장 하셨으면, 글쓰기를 눌러보시고요. 글쓰기 누르시고 나서 아래 코드를 한번 작성 해보시길 바랍니다.
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
무작정 넣으시면 안됩니다. 글쓰기 탭에 보시면 HTML이라 적혀 있는 곳이 있는데.. 음.. 잠깐만요~ 사진으로 한번 보고 가실께요~
이렇게 저기 HTML부분을 체크 해주신 후 위의 코드를 작성하시면 됩니다.
그리고 일반글을 작성 하실땐 다시 저 HTML을 풀어주고 작성하시면 됩니다.
약간의 번거러움은 있으나 뭐 그렇게 신경 쓰이지는 않(?)습니다. ㅎㅎ
입력 해보셨을때 뭔가 감이 오질 않나요?
아래가 결과 입니다.
function helloSyntaxHighlighter()
{
return "hi!";
}
나는 분명히 <pre class="brush: js"> </pre> 이 사이에 입력했는데 왜? 저거만 제외하고 안에 것들만 나오는 거지? 싶지 않나요?
그건 pre부분이 바로 저 하이라이터를 실행하라고 선언하는 부분이라고 합니다. 그래서 선언하고 빠지는 거죠. 그 안에 것이 진짜 표현 될 부분이 되는 것이구요.
완전 간단하죠?
<pre class="brush: js">
여러분, 여기 이 "brush: js" 부분이 궁금 하지 않으신지요?
바로 여기는 더 돋보이는 하이라이팅을 지원할 언어를 결정 짓는 곳 입니다.
지원언어는 C언어, C#, JavaScript 등등... 다양한 언어의 하이라이팅을 지원하기 때문에 프로그래밍을 하시는 분들은 조금더 쉽게 볼 수 있답니다.
"brush: " 는 하이라이터를 선언하겠다는 의미.
"js" 는 javascript라는 언어를 하이라이팅 하겠다는 의미. (js 말고도 다른 언어가 올 수 있겠죠?)
제가 C언어로 한번 작성 해보겠습니다. C언어를 배울때 가장 먼저 배운다는 Hello World!
<textarea name="code" class="brush:cpp;">
#include <stdio.h>
int main(void)
{
printf("Hello World!");
return 0;
}
</textarea>
자 하이라이팅이 잘안되죠?
이번에는 pre대신에 textarea 라는 놈을 써보았어요.
pre를 사용하면 오류가 납니다. 무슨 오륜지 봤더니 cpp언어 하이라이팅을 찾지못했다더군요.
당연하죠. 아까 우리는 자바스크립트만 적용시켰잖아요? head부분에...
그렇단 소리는.. 자바스크립트 외에 언어를 지원시킬려면 어쩔 수 없이 다운을 받아서 적용시켜야하는 번거러움이 따라올 수 밖에 없는거죠...
그래서 pre는 오류가 나는 것 이고 textarea로 어느정도 대체는 가능하나 하이라이팅이 되지 않습니다.
추후 시간이 되신다면 다운받아서 적용시키는게 가장 효율적 입니다.
지원 언어를 한번 보실까요?
"또! 질문이 있어요.", "아까 말하신 스킨과 지금 실습했던 스킨과 색깔이 다른거 같은데요.." ??
당연하죠~! 지금 스킨은 디폴트! 기본 색상이니까요.
우리가 변경해줄 수 있답니다.
아까 젤 처음입력했던거 중에 밑 부분을 봐주세요.
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css">
CSS를 결정짓는 부분인데요? CSS는 꾸며주는 역할을 한답니다.
'shCoreDefault.css'는 방금 우리가 봤던 기본색상을 표 한답니다.
이런거죠. ~~
아까 우리가 보았던 스킨은 바로 'shCoreDjango.css' 이 색상입니다.
이색깔 이죠? ~~ㅋㅋㅋ
이제 어떻게 바꾸는지 감이 오셨나요?
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/여기 이부분에 원하는 색상의 CSS파일이름 넣기!">
이렇게 바꾸시면 됩니다. 저 색상 외에도 많아요~
shCoreEclipse.css
- shCoreEmacs.css
- shCoreFadeToGrey.css
- shCoreMDUltra.css
- shCoreMidnight.css
- shCoreRDark.css
<출처: http://w2hite.tistory.com/3 [개발스러운]>
색상에 더욱 자세히 나와 있는걸 보시고 싶으시면 아래의 사진을 참고 하여 주시면 감사하겠습니다.
이상입니다!~
