오늘은 뎁스팀을 좋아하는 나에게나 다른 개발자 분들에게 필요한 작은 기능을 심어봤다. 바로 highlight.js(하이라이트)다. 하이라이트.js는 텍스트를 인식해서 소스 코드의 구문 강조 등을 먹여주는 라이브러리다.
나는 스팀잇에서 왜 아직도 이걸 적용 안하는지 의문이다. 많은 블로그들은 이미 소스 강조 기능이 많이 대중화 되어있다.
네이버 블로그나 티스토리 등.
네이버 블로그의 소스 강조 기능.
스팀잇은 소스를 올리면 좀 꼴뵈기 싫게 보여준다. 복붙이나 하라는건지 이건 뭐... 장난 지금 나랑 하냐?
스팀잇...(차마 말이 나오지 않는 가시성)
전부터 불만이 있었기에 소스를 좀 더 보기 편하게 해주는 놈을 적용시켜봤다. 일단 before와 after를 보자.
내가 엊그제 썼던 글에 스크립트 임포트 하는 부분이다. 물론 저건 이미지가 아니고 ~~~~ 물결로 감싼 텍스트다.
before
after 소스 강조 & 테마가 들어감.
혹시 모르실분이 계실수도 있을것 같은데 이미지가 아니라 텍스트다. 복사도 된다는 소리당... ㅎㅎ
현재 테마는 atom dark 버전이다. 그리고 포스팅에 #kr-dev, #steemdev, #dev, #programming, #java, #c, #python, #javascript 의 태그가 붙는 경우에만 ~~~~로 감싼 구문에 저 소스 강조 기능이 작동한다. 일상 포스팅에 저게 적용된다면 조금 웃긴 모습이 나올수도 있으니까.
이렇게 해서 만들었다고 자랑하려고 했는데 #kr-dev글을 보는 기능이 없는 것이다. ㅡ.ㅡ;;
해서 처음에 Feed 쪽에 kr-dev만 추가했다가 #kr-dev만 편애하냐는 핀잔을 받기 싫어서 인기있는 몇 몇 태그 생각나는 대로 넣어봤다.
아마도 저 태그들을 손볼수 있는 태그 에디터 기능을 넣을 생각이다. 순서 정렬과 원하는 태그를 넣는 기능이 추가 될것 같다.
이렇게 Edit 기능을...
두번째로 Links들이 동작하게 링크를 걸어두었다. 계정명이 필요한 사이트들은 계정 선택한게 자동으로 들어간다. ㅎㅎㅎ
아직도 여러가지 몇몇 버그들이 보인다. 너무 조회 기능만 치중하다보니 글을 보는 거 자체는 큰 문제는 없지만 보팅을 하고 싶은데 못하는게 문제다. 스팀커넥트 연결이 절실해보인다... 물론 댓글을 보는 기능도 아직 없다. 시간 날때 하나하나 추가해봐야겠다. 그러다보면 좀 쓸만해질지도 모르겠다.
주소 : https://nhj7.github.io/steem.apps/
ps. 이외에 등록하고 싶은 태그 추천 받습니다. 음~ 기능 추천도 좋습니다.
여기서부터는 개발자들을 위한 highlight.js 적용 방법.
1 Script와 CSS 임포트.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
2 포스팅 화면을 그려주고 나서 < pre>< code> 태그들을 선택하여 highlight.js를 이용해서 호출해주면 끝. 
// 생략...
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
// 생략...