블로그 소스 하이라이트

SyntaxHighlighter 소스코드 접기 펼치기 기능 설정하기

SyntaxHighlighter에 작성한 소스코드는 기본적으로 펼쳐진 상태로 보입니다. 소스 코드 접기 collapse 옵션을 사용하여 접혀진 상태로 표시를 할 수 있습니다. 그리고 접혀져 있는 소스 코드를 클릭하면 소스가 펼쳐집니다. pre 태그 설정 방법 해당 pre 태그만 접혀진 상태로 표시됩니다. <pre class="brush:php ; collapse:true"> … </pre> 스크립트 설정 방법 블로그 내에 모든 소스 부분이 접혀진 상태로 표시됩니다. SyntaxHighlighter.all();앞에 작성. <scrip...

SyntaxHighlighter 물음표(도움말) 마크 숨기기

SyntaxHighlighter를 사용하여 소스코드를 작성한 경우 기본적으로 화면 오른쪽 상단에 물음표(?) 마크인 툴바가 표시됩니다. 도움말 숨기기 물음표 마크인 툴바를 안 보이게 하기 위해서는 toolbar 옵션에 false를 설정하면 됩니다. pre 태그 설정 방법 해당 pre 태그에서만 물음표 마크 숨기기. <pre class="brush:php ; toolbar:false"> … </pre> 스크립트 설정 방법 블로그 전체 물음표 마크 숨기기. SyntaxHighlighter.all(); 앞에 작성. <script type...

SyntaxHighlighter 소스코드 URL 링크 삭제하기

SyntaxHighlighter에 작성한 소스코드 안에 URL이 포함되어 있는 경우 URL을 클릭하면 해당 페이지로 이동됩니다. URL 링크 삭제 소스 부분에 작성한 URL을 클릭해도 이동되지 않도록 링크를 삭제하기 위해서는 auto-links를 false로 설정해주면 됩니다. pre 태그에 직접 설정하면은 해당 소스 부분만 적용이 되고, 스크립트에 추가하면 블로그 전체에 설정이 반영됩니다. pre 태그 설정 방법 <pre class="brush:php ; auto-links:false"> … </pre> 스크립트 설정 방법 작성 ...

SyntaxHighlighter 특정 줄에만 색상 변경 하이라이트 설정하기

특정 줄에만 하이라이트를 설정하여 색상을 변경해 강조하고 싶은 경우 highlight 옵션을 사용하여 설정할 수 있습니다. 색상 변경 한 줄만 설정할 수도 있도 여러 줄을 설정할 수도 있습니다. 또한 pre 태그에 직접 설정하여 해당 소스만 설정할 수도 있으며, 스크립트에 설정하여 블로그 전체에도 설정할 수 있습니다. pre 태그 설정 방법 한 줄만 하이라이트를 넣고 싶은 경우. <pre class="brush:php ; highlight:3"> … </pre> 3번째 줄에만 하이라이트가 설정됩니다. 여러 줄에 하이라이트를 넣고 싶...

SyntaxHighlighter 줄번호 숨기기 시작번호 변경하기

소스 코드 하이라이트인 SyntaxHighlighter에서 줄번호를 안 보이게 하는 방법입니다. 방법은 pre 태그에 직접 설정하는 방법과 스크립트에 추가하는 방법이 있습니다. pre 태그에 직접 설정하면은 해당 소스 부분만 적용이 되고, 스크립트에 추가하면 블로그 전체에 설정이 반영됩니다. 줄 번호 숨기기 줄번호를 표시/비표시로 해주는 옵션은 gutter입니다. gutter 값을 false로 설정하면 줄번호가 안 보이게 됩니다. pre 태그 설정 방법 <pre class="brush:php ; gutter:false"> … </p...