소스코드 가시적으로 포스팅 하기!

블로그를 시작하기 전에 소스를 저장하거나 공유하게 될 일이 많이 생길 것 같아
SyntaxHighlighter를 이용하여 가시적으로 보기 편하게
포스팅하는 방법에 대하여 간단하게 소개하고자 합니다.

– 본 포스팅에서는 버전3.0.83을 사용합니다.

https://github.com/syntaxhighlighter/syntaxhighlighter

우선 위 사이트로 이동하여 사용하고자 하는 버전을 다운로드 합니다.

다운로드 후 압축파일의 루트폴더입니다.
스크립트 폴더와 스타일 폴더의 내용물을 압축해제하여 서버 적당한 곳에 업로드해 주세요!

<!--SyntaxHighlighter시작-->
<link rel="stylesheet" type="text/css" href="/syntaxhighlighter/styles/shCoreDefault.css" />
  
<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.min.js" ></script>
<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js" ></script>
  
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!--SyntaxHighlighter끝-->

위의 코드를 수정하여(js위치,css위치,테마,사용할 언어등) 헤더에 위치시켜 줍니다.

<pre class="brush: xml">
코드내용은 여기에!!
(xml이나 html의 경우 "<"를 "& lt;"로 ">"를 "& gt;"로 바꿔주세요. 띄어쓰기 없이!)
</pre>

위의 코드를 본문에 넣으면 보시는것과 같은 효과를 얻을 수 있습니다.
xml이나 html의 경우 줄바꿈이 되지 않는 문제가 있는데요.
이 경우 <를 &lt ;로 >를 &gt ;로 변경하여 입력 해 주세요.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

각 언어별 스크립트 파일 이름은 여기서 확인하세요

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

테마는 여기서 확인하세요.

https://cdnjs.com/libraries/SyntaxHighlighter

업로드 가능한 호스팅 서버가 없다면 위의 사이트에서 같은 방법으로 가져와 사용이 가능합니다.

블로그 시작하기!

2020년 새해를 맞이해 새로운것에 도전!!

나의 생각과 체험 것을 기록하고
내가 좋아하는 것에 대해 함께 이야기하고
생각과 지식을 함께 공유하며
소통 할 수 있는 곳을 만들고 싶어졌다.

한국에서는 누구나 가지고 있는 네이버 계정으로
쉽게 소통이 가능한 네이버 블로그와
구글 노출 및 다양한 확장성, 커스텀등이 가능한
워드프레스를 동시에 운영하고자 한다.

(솔찍히 워드프레스를 배우고자 하는 취지가 더 크다)

작심삼일 하지 않기를!