레이블이 자바스크립트인 게시물을 표시합니다. 모든 게시물 표시
레이블이 자바스크립트인 게시물을 표시합니다. 모든 게시물 표시

2012년 6월 12일 화요일

블로그스팟에 조금 더 예쁜 코드 넣기

블로그의 템플릿이 동적뷰로 바꾸고 나니, google-code-prettify가 작동하지 않는다. google-code-prettify가 긴 줄의 표시도 매끄럽지 못하고, 매스매티카 문법도 인식하지 못해서 불편을 겪던 차여서 다른 걸 찾아보기로 했다. 뒤져보니 Alex Gorbatchev가 만든 SyntaxHighlighter란 게 있다. 설치방법은 Way2Blogging에 잘 나와 있고 적용도 잘 된다.

몇 가지 아쉬운 점도 있다.

  • 동적뷰는 html 수정을 하지 못하므로 SyntaxHighlighter도 역시 적용할 수 없다. 그래서 다시 예전 템플릿으로 회귀.
  • 홈페이지에 나온 것과 같이 함수를 써서 깔끔하게 html에 집어넣는 건 실패했다. 일일이 긴 주소를 다 써서 넣어야 한다. 다행히도 Way2Blogging에 스크립트 자동 생성기가 있다.
  • 매스매티카 브러시도 있긴 한데, 내부에 매스매티카 내부 함수 2,200개 정도를 표기해 놓았나 보다. 이것 때문에 브라우저가 느려질 수 있다고 한다. 이 브러시는 본 배포본에 빠져 있어서 추가하려면 별도로 서버에 올려야 한다. 이런 문제로 매스매티카 브러시는 쓰지 않기로 했다.

2011년 1월 14일 금요일

블로그스팟에 예쁜 코드 넣기

google-code-prettify라는 자바스크립트 프로그램을 이용하면 블로그스팟에 코드를 예쁘게 넣을 수 있다. 이 프로그램을 블로그스팟에 적용하는 방법을 살펴본다.

블로거에 로그인해서 ‘꾸미기’-’HTML 편집’으로 들어간다. ‘스킨 수정’에서 <head> 태그 다음 줄에 아래 내용을 추가한다.
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'>  </script>
<body> 태그를 수정한다.
 <body onload="prettyPrint()">
글을 작성하고, ‘HTML 편집’을 눌러서 글에 넣을 코드를 다음 태그로 둘러싼다.
<pre class="prettyprint">
    // add your code here
</pre> 
써보니, C++의 템플릿 코드에서 약간 문제가 발생한다. 이 문제는 C++ 코드를 '글쓰기'에서 입력하면 말썽을 일으키는 문자를 자동으로 변경해주니 해결된다. 매스매티카 언어를 지원하지 않는 문제도 있는데, 이건 직접 src/lang-nb.js 파일을 만들어서 등록해야 할 것 같다.