티스토리 블로그에 소스코드를 보기좋게 삽입하는 방법! - 사용편

 

 

이번에는 Syntaxhighlighter를 사용하는 방법에 대해서 살펴보겠습니다. 사용방법은 두 가지 방법이 있습니다. 한 가지는 <pre>를 사용하는 방법이고, 다른 한 가지 방법은 <script>를 사용하는 것입니다. 그럼 어떤 방법을 사용하는 것이 좋을까요? 살펴보기 전에 우리가 어떤 언어의 코드를 삽입할 것인지 정해야 합니다.

 

 

 

출처: SyntaxHighlighter 공식 홈페이지

위에 표를 참고하면 됩니다. 파란색으로 표시되어 있는 부분을 기억해 두셔야 합니다. 혹은, 중간에 것을 사용해도 부방합니다.

 

 

 

그러면, 본격적으로 사용해볼까요?

 

1. <pre />코드 사용하기

<pre class="brush: xxx"> // xxx 부분에 원하는 brush name을 넣으면 됩니다.
// 코드 삽입하는 부분
</pre>

 

 

  

2. <script /> 사용하기

<script type="syntaxhighlighter" class="brush: xxx"> // xxx부분에 brush name을 넣으면 됩니다.
// 코드 삽입하는 부분
</script>

 

 

  

3. <pre />와 <script />의 차이점은?

검색엔진의 수집하는 봇들이 블로그의 내용을 수집할 때 <pre />같은 경우는 코드 내용까지 수집합니다. 하지만 <script />를 사용하면 코드 내용을 수집하지 않습니다. 즉 <pre>코드를 사용해야 검색결과에 노출될 터이니, 코드를 공유하는 블로그 같은 경우는 신경이 쓰일 수 밖에 없습니다.

단, 문제점이 있습니다. <pre />를 사용하면 ' < '가 &lt 로 대체되어 표기될 수 있다고 합니다.
<script />를 사용하면 문제는 없습니다.

기회비용을 잘 따져서 사용하면 될 것 같습니다. ^^

 

 

 

다음 글에서는 테마를 적용해 보는 방법에 대해서 알아보겠습니다.

내용이 마음에 드신다면 공감(♡)을 눌러주세요.
로그인 하지 않으셔도 가능합니다. 감사합니다!