[개발] 개발자들이여 소스코드 올리는 것을 두려워말지어다- highlight.js 적용방법

오늘은 뎁스팀을 좋아하는 나에게나 다른 개발자 분들에게 필요한 작은 기능을 심어봤다. 바로 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);
});
// 생략...