Markdown Highlight
Markdown + Highlight
마크다운 예쁘게 꾸미기
마크다운 테마적용
매우 쉬움주의…
Highlight.js의 장점은 코드에 따로 class를 지정해줄 필요가 없다는 것이다. Prettier보다 한줄 더 추가해줘야 하긴 하지만 역시 매우 간단하다.
우선 블로거 페이지 > 테마 > HTML 편집 으로 간다.
아래 두 줄을 <head>에 추가한다.
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.0.0/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/9.0.0/highlight.min.js"></script>
위 css의 default에 원하는 테마를 넣어주면 된다.
테마의 데모는 여기서 확인하면 된다.
그리고 마지막으로 highlight하기 위한 두 가지 방법이 있는데, 첫번째는 알아서 ```코드를 찾아서 변환한다.
두번째는 원하는 위치를 지정해서 사용해줄 수 있다.
원하는 코드를 마찬가지로 <head>에 넣어주면 끝!
1)
<script> hljs.initHighlightingOnLoad();</script>
2)
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
이렇게만 해주면 끝!
class helloworld() {
안녕 hightlight!!!
}
댓글
댓글 쓰기