본문 바로가기

웹도구 및 Plugin/SyntaxHighlighter

SyntaxHighlighter를 이용한 소스코드 입력하기

SyntaxHighlighter 


사이트 => http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


시작하기 앞서,

Torchpad Wiki, Naver Blog, Tistory Blog를 사용하면서, Torchpad Wiki의 마크다운 방식이 매우 흡족스러웠다. 하지만 블로그를 운영하기에는 Wiki는 한계를 느꼇고 결국 Tistory로 옮겨왔습니다. 

개발자이다보니 소스 코드를 게시하고 싶지만 다음 에디터로는 역시 만족스럽지 못해 매우 아쉬운 감이 있었습니다.
그러다 구글 검색을 해봤는데 왠걸 JavaScript로 개발된 "Syntaxhighlighter"라는 것이 있었습니다. 

"Syntaxhighlighter"는 개발자가 웹 사이트에 코드를 표시하는데 매우 도움을 주는 라이브러리입니다. 

기본 단계

1. 페이지에 기본 파일로 shCore.js하고 shCore.css는 꼭 추가해야 합니다.
2. 원하는 브러쉬를 추가하면 됩니다. (예: JavaSript의 경우 shBrushJScript.js,  see the list of all available brushes)
3. shCore.css, shThemeDefault.css를 포함시킵니다. ( include )
4. 에디터의 글을 작성할 때, html 소스보기에서 <pre></pre> 태그를 만든 후 이 태그 안에 코드를 삽입합니다.
5. SyntaxHightlighter.all() 자바스크립트 메소드를 호출합니다.


설치방법 

▲ Click - 위 이미지를 클릭하면, http://sasgacoding.tistory.com(사쓰가코딩) 블로그 페이지로 이동합니다. ▲

위 사쓰가코딩님의 블로그를 통해 쉽게 적용할 수 있었습니다.


테스트


function XMLRPCMessage(methodname){
  this.method = methodname||"system.listMethods";
  this.params = [];
  return this;
}

private string ConvertCodeToName(string code) {
  if ("LF".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "전단지";
  if ("PS".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "포스터";
  if ("PM".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "종이홀더";
  if ("PO".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "달력";
  if ("EV".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "봉투";
  if ("PL".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "종이부채";
  if ("PP".Equals(code, StringComparison.InvariantCultureIgnoreCase)) return "종이가방";

return code;
}