이런 것들을 적용할려면 스킨 또는 템플릿의 html 편집이 가능해야 한다.
구글 블로그도 가능하기는 한데 해당하는 js 파일을 올리는 기능이 없다.
그렇다면? CDN 에서 제공하는 것을 이용하면 된다.
jQuery 및 javascript 외부에서 추가하는 여러가지 방법
위글에서 3번째 cdnjs 에서 SyntaxHighlighter를 호스팅하고 있다.
이것을 이용하여 구글 블로그에 코드 구문 강조 기능을 넣으면 된다.
1. 블로그 설정에서 템플릿 --> HTML 편집을 선택하여 들어간다.
2. html 코드가 나오는데 </head> 부분을 찾는다.
3. 그 위에 다음과 같은 코드를 넣으면 된다.
1 2 3 4 5 6 7 8 9 10 11 | <link href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreMidnight.min.css" rel="stylesheet" type="text/css"><!-- 코드를 어떤 형태로 보여줄지 테마에 관한 설정 파일 원하는 것을 링크 걸어주면 된다. --><script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js" type="text/javascript"></script><!-- 코드 구문 강조를 하기 위해서 꼭 필요한 파일이다 --><script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js" type="text/javascript"></script><!-- C, CPP 등의 구문에 대한 강조를 하기 위해 설정한 파일이다. --><!-- 필요한 것들을 찾아서 넣어주면 된다. --><script type="text/javascript">SyntaxHighlighter.all();</script><!-- 파일을 링크 시켰으니 구동을 하기 위한 스크립트 --> |
4. 위 설정을 완료했으면 저장을 하면 됩니다.
코드 구문 강조를 사용하는 방법은 글을 작성하고 html 편집 모드로 들어가1 2 3 4 5 6 7 | <pre class="brush: cpp">// 요기에 코드를 넣으면 됩니다.</pre>// brush 뒤에 cpp라고 적혀 있는데 이것은 shBrushCpp.min.js를 링크했기 때문에 됩니다.// 다른 것을 사용하고자 한다면 해당하는 파일들을 링크해야 됩니다.// ex) html 은 shBrushXml.js, python 은 shBrushPython.js// 3번 항목에 <script src="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js" type="text/javascript"></script>// 라고 넣어주어야 됩니다. |
의 형태로 작성을 하고 저장을 하면 됩니다.
테마는 다음 링크에서 확인이 가능합니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
구문의 언어에 대한 것은
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에 있으니 원하는 파일들을 위쪽에 있는 형식으로 작성해서 넣어주면 됩니다.
그럼 조금이라도 더 나은 구글 블로그 생활이 되기를 바랍니다.
댓글 없음:
댓글 쓰기