구글 블로그에 소스 코드 이쁘게 넣는법 SyntaxHighlighter

구글 블로그에 소스 코드를 예쁘게 넣어보자

1. 우선 [내 블로그]의 [템플릿 탭]에서 [HTML편집]을 선택한다.

2. <head> 밑에 빨간 박스의 내용을 삽입한다.

<!-- SyntaxHighlighter 설정 -->
  <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.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/shBrushBash.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/shBrushXml.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 type='text/javascript'>
    SyntaxHighlighter.all()
  </script>
  <style type='text/css'>
  .syntaxhighlighter table tbody
  {
    font-size: 0.8em !important;
  }
  </style>

- 참고 - 코드 하단에 폰트 사이즈를 작게 하는 스타일을 적용했습니다.

자세한 내용은 위와 같다.
중간에 shBrushJava, shBrushBash 등은 필요에 따라 추가 해주면 된다.
제공되는 브러쉬는 여기에서 찾아서 사용하면 된다.

나는 Java, Bash, C++, Xml을 추가해 보았다.

3.이제 블로그에 예쁘게 코드들 올려보자
블로그 작성 창에서 왼쪽 상단 [HTML]버튼을 클릭 후 HTML로 직접 넣어 줘야 한다.

<pre class="brush:java">
[CODE]
</pre>

사이에 코드를 넣어주면 완성

import test;
public class Hello_world extends ex{
  public String Name;
  public void setName(String name){
    Name = name;
  }
}

나는 java 코드로 넣어 보았다.
이제 예쁘게 블로그를 만들면 된다.

HiClover

이 블로그 검색

구글 블로그에 소스 코드 이쁘게 넣는법 SyntaxHighlighter

댓글

댓글 쓰기