블로그에 코드 올릴 때 가독성을 올리기 위해 Syntax Highlighting 쓰게 됨.
검색 해보면 이것 저것 있는데, Google Code Prettify을 알게되서 적용법 정리함.
적용 방법도 간단하고 서식으로 추가 해두면 코드 복붙하기도 편함.
기본 지원 언어 23종 이l라고 함.
bsh; c; cc; cpp; cs; csh; cyc; cv; htm; html; java; js; m; mxml; perl; pl; pm; py; rb; sh; xhtml; xml; xsl.
깃허브 주소
https://github.com/googlearchive/code-prettify
Syntax Highlighting 적용하기.
블로그 관리 -> 꾸미기 -> 스킨 편집 -> html 편집 클릭 하면 html 편집 창이 뜸.
코드 편집
<html>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=doxy"></script></html>
코드를 맨 위쪽 부 터 쭉 보면 head 안에 <></> 혹은 < /> 이런 식으로 짝이 맞게 되어있음.
<html> 아래에 위 코드를 추가한다.
테마도 찾아보면 이것 저것 있음.
https://cdn.rawgit.com/google/code-prettify/master/styles/index.html
서식 만들기.
블로그 관리 -> 콘텐츠 -> 서식 관리 -> 서식 쓰기
HTML 체크 표시가 있음.
누르고 아래 코드 입력.
체크 풀면 흰색 네모박스가 생김.<pre class="prettyprint lang-cs notranslate"> </pre>
저장.
lang-cs(사용하는 언어) notranslate(구글 번역 방지)
글쓰기 들어가서 설정에 보면 서식이 있음.
서식 눌러서 불러오고 박스안에 코드 붙여 넣으면 위에 하이라이트 적용 됨.
CSS 폰트 변경. 샘플
pre { padding: 10px;
margin: 5px 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #ddd; font: 12px/180% 'Lucida Console'; background-color: #fafafa; border-radius: 3px; } pre.prettyprint { padding: 14px; //padding 설정 font-size: 1.1rem; font-family:'BitStream Vera Sans Mono'; line-height: 1.45; border: 1px solid #fff; margin: 2px;
}
'취미생활 > 블로그 꾸미기' 카테고리의 다른 글
| 티스토리 새로운 글쓰기 사용 안하는 법 (0) | 2019.04.09 |
|---|---|
| Base64String을 html 이미지로 사용법 (0) | 2018.04.25 |
| 환율 정보, 환율 계산기 위젯 (0) | 2018.01.19 |
| 실시간 접속자(방문자) 표시 (0) | 2017.12.31 |
| 구글 번역 사이드바 만들기 (0) | 2017.12.29 |
| 웹 관련 링크 모음 (0) | 2017.12.28 |
| 사이드바 스크롤 속도 조절 (1) | 2017.12.09 |
| 글 접기 or 펼치기 수정하기 (4) | 2017.11.10 |