하는 일이 PHP 개발이다 보니 이 블로그에 개발 코드를 포스팅할 때가 있는데 이럴 때 가독성을 높이기 위해 SyntasxHighlighting 을 플러그인 등을 이용해 적용해 왔다. 최근에 Prismjs 관련 내용을 접하고 블로그에 적용하기 위해 워드프레스 플러그인 등을 설치해보기도 했지만 마음에 들지 않아 결국은 직접 적용해보는 것으로 정하고 시간을 투자해서 작업을 마무리 했다. Prism is a lightweight, extensible …
코드등을 포스트할 때 사용하던 SyntaxHighlighter 플러그인을 Crayon Syntax Highlighter 로 교체했다. 이전 플러그인의 문제점이 지금 사용하는 테마에서 자동 줄바꿈이 돼서 css 코드를 삽입해서 해결을 했었지만 에디터를 CKEditor에서 워드프레스 기본 에디터로 교체하니 이전 플러그인을 계속 사용해야할 필요성을 느끼지 못해 다른 플러그인을 찾다가 딱 마음에 들어서 바로 교체를 했다. 다행히 이전에 작성했던 포스트에도 수정없이 바로 적용됐다. 기존 플러그인보다 …
첨부된 이미지처럼 SyntaxHighlighter를 적용하고 폰트 사이즈등을 변경하면 세로 스크롤바가 생긴다. 이 스크롤바를 사라지게 하기 위해서는 아래 코드를 css 파일에 추가해주면 된다. .entry .syntaxhighlighter { font-size: 1.1em!important; padding-bottom: 5px!important; } 위 코드에서 스크롤바를 사라지게 하는 부분은 padding-bottom: 5px!important; 이다. 이 코드만 추가해줘도 스크롤바는 사라지게 된다. 현재 블로그에서만 테스트된 코드이기 때문에 다른 환경에서는 어떻게 적용될지 확인할 수는 없다.
syntaxhighlighter.zip 이미지와 같은 그누보드4s용 SyntaxHighlighter 적용 게시판스킨이다. g4s의 basic 게시판 스킨에 SyntaxHighlighter를 적용한 것으로 에디터를 사용하여 소스코드를 입력하고 보여줄 때 사용할 수 있다. 사용법은 아래와 같다. 1. 스킨설치 PC용 스킨만 있으며 skin/board 폴더 아래에 첨부된 압축 파일을 다운로드 후 압축을 풀고 FTP로 업로드 한다. 게시판 설정에서 스킨을 해당 스킨으로 선택한다. 2. 스킨설정 스킨의 js 폴더 …
이건 크게 사용할 일은 없을 듯 하지만.. 만약 게시판에 php 코드등을 올릴 때 사용하면 좋을 듯 하다. 우선 정해야할 것이 코드를 어떻게 올릴 것인지인데.. [code:xxx] …… [/code] 이런 식으로 [code] [/code]로 감싼 부분에 코드를 입력한다. 그리고 여기서 xxx 는 언어명이다. php 라면 [code:php] 이렇게 된다. 코드는 html 에디터를 이용해 입력하는 것으로 한다. 에디터가 없는 환경은 …