2016. 4. 16. 23:55ㆍ[개발] 지식/환경설정
최근에 HTML,CSS,Javascript를 공부하고 있어서 블로그에 업데이트해야지..라고 생각하던 중,
코드 하이라이터에 대해 찾아봐야겠다는 생각이 갑자기 들었습니다.
예전에 이미 Syntax Highlighter를 세팅했지만 뭔가 조잡한 면이 없잖아 있어서 바꿔보고자 합니다.
Ps. google code prettify도 나름 쓸만한 것 같은데 그냥 이걸로 적용..
highlight.js
1. https://highlightjs.org/ 에 들어가 Get Version 버튼을 누르고 들어가면 아래와 같은 화면이 나오는데요
cdnjs, jsdelivr 중 아무거나 복사해서 HEAD 태그 안에 넣도록 합니다.
만약 스타일을 바꾸고 싶다면 https://github.com/isagalaev/highlight.js/tree/master/src/styles
를 참고해서 default.css만 바꿔주시면 됩니다.
그리고 js를 적용하기 위해
<script>hljs.initHighlightingOnLoad();</script>
구문을 마지막에 추가해줍시다.
2. 추가했으면 이제 코드를 넣고자 하는 곳을 PRE태그와 CODE 태그로 감쌉니다.
<PRE> <CODE> <!DOCTYPE html> <HTML> <HEAD> <meta charset="UTF-8"> </HEAD> <BODY></BODY> </HTML> </CODE></PRE>
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;
ex) CSS
@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)
}
}
HTML 같은 경우는 '<' 나 '>'같은 부분을 <, >와 같은 HTML Character Entity로 변환해서 넣어줘야 합니다.
티스토리와 같은 블로그의 경우에는 일반 텍스트 입력 창에서 HTML코드를 넣고 HTML모드로 변경하면
알아서 특수기호가 변환되어 있으므로, 이를 복사해서 넣어주는 추가적인 작업을 해주셔야 합니다.
'[개발] 지식 > 환경설정' 카테고리의 다른 글
| [Eclipse] Proxy 설정 (0) | 2017.11.07 |
|---|---|
| eclipse에서 SVN 설치시 SVN Connector가 자동으로 설치되지 않을때 (0) | 2016.10.25 |
| [이클립스] Spring MVC Project가 안보일 때 (0) | 2016.05.25 |
| [이클립스] 서버 삭제 후 재등록이 안될 때 (0) | 2016.05.25 |