웹페이지나 블로그에 프로그래밍 소스코드를 포함하여 글을 쓰는 방법은 여러가지가 있지만, 그 중에서 “Open Live Writer (이전의 Microsoft의 Windows Live Writer가 Opensource화 된 것임)”를 Blogger (티스토리도 유사하게 적용 가능함)와 연동하고, Syntax Highligher와 PreCode를 이용하여 코드를 예쁘게 나타내는 방법을 소개하겠습니다.
2. Syntax Highlighter: 웹사이트나 블로그에 소스코드를 표시할 수 있게 해주는 Javascript Library입니다. 프로그래밍 관련 문서를 웹에 게시할 때 가장 효과적인 방법론 중에 하나이나, 사용법이 쉬지만은 않은 단점이 있습니다. 우리말도 된 자세한 설치 및 사용법은 여기를 참고하세요.
3. PreCode: 소스코드를 Syntax Highligher에 맞는 포멧으로 HTML을 작성하는 것은 귀찮은 일인데, 이것을 자동으로 해주는 오픈소스 프로그램입니다. 사용법은 어렵지 않고 직관적입니다. Visual Studio등에서 작성된 코드를 카피하여 PreCode에 복사해 넣고 옵션을 선택 후 “Copy to Clipboard and Close”를 클릭하고, 원하는 웹페이지나 블로그의 글의 Source에 붙여 넣으면 됩니다.
2. Blogger에 접속하여 템플릿의 “HTML 편집”을 클릭하여 <head> 바로 아랫줄에 Syntax Highlighter관련 다음 Script를 추가합니다. 이것은 한번만 설정해 놓으면 됩니다.
3. 이제는 Writer로 글쓰기를 하시면서 필요할 때마다 다음을 진행하면 됩니다. PreCode를 실행하고, 원하는 코드를 다른 프로그램(Visual Studio, NotePad++ 등)에서 복사하여 붙여 넣고, 원하는 옵션을 선택한 후 “Copy to Clipboard and Close” 클릭합니다. Writer의 하측에 Source Tab를 선택한 후 붙여넣기를 하면 됩니다. 참고로 <pre> </pre>사이에 코드가 들어가 있습니다. Publish를 눌러 게시를 하면 멋지게 소스코드가 들어가 있는 것을 확인할 수 있습니다.
즐거운 블로깅 하시길...
■ 사전 필요 사항
1. Open Live Writer: MS Word에서 글쓰기 하는 것처럼 쉽게 블로그에 글을 쓸 수 있는데, 기본적으로 Blogger와 Wordpress에 연결이 가능하고(티스토리도 됨), 자동 게시 및 Preview 기능이 뛰어납니다. 우리말로 된 자세한 설명과 방법은 여기를 참고하세요.
2. Syntax Highlighter: 웹사이트나 블로그에 소스코드를 표시할 수 있게 해주는 Javascript Library입니다. 프로그래밍 관련 문서를 웹에 게시할 때 가장 효과적인 방법론 중에 하나이나, 사용법이 쉬지만은 않은 단점이 있습니다. 우리말도 된 자세한 설치 및 사용법은 여기를 참고하세요.
3. PreCode: 소스코드를 Syntax Highligher에 맞는 포멧으로 HTML을 작성하는 것은 귀찮은 일인데, 이것을 자동으로 해주는 오픈소스 프로그램입니다. 사용법은 어렵지 않고 직관적입니다. Visual Studio등에서 작성된 코드를 카피하여 PreCode에 복사해 넣고 옵션을 선택 후 “Copy to Clipboard and Close”를 클릭하고, 원하는 웹페이지나 블로그의 글의 Source에 붙여 넣으면 됩니다.
■ 사용 방법
1. Open Live Writer와 PreCode 프로그램을 다운로드하여 PC에 설치합니다.2. Blogger에 접속하여 템플릿의 “HTML 편집”을 클릭하여 <head> 바로 아랫줄에 Syntax Highlighter관련 다음 Script를 추가합니다. 이것은 한번만 설정해 놓으면 됩니다.
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all();
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.bloggerMode = true;
</script>3. 이제는 Writer로 글쓰기를 하시면서 필요할 때마다 다음을 진행하면 됩니다. PreCode를 실행하고, 원하는 코드를 다른 프로그램(Visual Studio, NotePad++ 등)에서 복사하여 붙여 넣고, 원하는 옵션을 선택한 후 “Copy to Clipboard and Close” 클릭합니다. Writer의 하측에 Source Tab를 선택한 후 붙여넣기를 하면 됩니다. 참고로 <pre> </pre>사이에 코드가 들어가 있습니다. Publish를 눌러 게시를 하면 멋지게 소스코드가 들어가 있는 것을 확인할 수 있습니다.
즐거운 블로깅 하시길...
댓글
댓글 쓰기