https://steemitimages.com/DQmNQowmEJNR9dMYkAkz6H15sGrXGhbHvKAnxudnJpX8vFJ/%EC%95%95%EC%B6%95_%EB%8C%80%EB%AC%B8.png

오늘은 뎁스팀을 좋아하는 나에게나 다른 개발자 분들에게 필요한 작은 기능을 심어봤다. 바로 highlight.js(하이라이트)다. 하이라이트.js는 텍스트를 인식해서 소스 코드의 구문 강조 등을 먹여주는 라이브러리다. 

나는 스팀잇에서 왜 아직도 이걸 적용 안하는지 의문이다. 많은 블로그들은 이미 소스 강조 기능이 많이 대중화 되어있다. 

네이버 블로그나 티스토리 등.

<sub>네이버 블로그의 소스 강조 기능.</sub>
![](https://cdn.steemitimages.com/DQmZRvoCHUQKPAJv85rQ1HRp3YHgFwbUmtSJYL6wwPCk8Rw/image.png)

스팀잇은 소스를 올리면 좀 꼴뵈기 싫게 보여준다. 복붙이나 하라는건지 이건 뭐... `장난 지금 나랑 하냐?`

<sub>스팀잇...(차마 말이 나오지 않는 가시성)</sub>
![](https://cdn.steemitimages.com/DQmSJ33Gofh1LSBncwixkfujUEyCd97TZFNkQ4mixHnKzKW/image.png)

전부터 불만이 있었기에 소스를 좀 더 보기 편하게 해주는 놈을 적용시켜봤다. 일단 before와 after를 보자. 

내가 엊그제 썼던 글에 스크립트 임포트 하는 부분이다. 물론 저건 이미지가 아니고 `~~~~` 물결로 감싼 텍스트다. 

<sub>**before**</sub>
![](https://cdn.steemitimages.com/DQmT9q5zpC2Tkme94gp94cPDwJHRTKx5jA4DhXRA49rXj8B/image.png)



<sub>**after 소스 강조 & 테마가 들어감.**</sub>

![](https://cdn.steemitimages.com/DQmeAR37h4kJiufJRY75J73nuvuQUY8echLVHrorzp1JeVe/image.png)

혹시 모르실분이 계실수도 있을것 같은데 이미지가 아니라 텍스트다. 복사도 된다는 소리당... ㅎㅎ

![highlight.gif](https://cdn.steemitimages.com/DQme8MNSbXx462BxURiu3ZuhFPpKeKVwuVquWFSMbu53jxM/highlight.gif)

현재 테마는 atom dark 버전이다. 그리고 포스팅에 #kr-dev, #steemdev, #dev, #programming, #java, #c, #python, #javascript 의 태그가 붙는 경우에만 `~~~~`로 감싼 구문에 저 소스 강조 기능이 작동한다. 일상 포스팅에 저게 적용된다면 조금 웃긴 모습이 나올수도 있으니까. 

이렇게 해서 만들었다고 자랑하려고 했는데 #kr-dev글을 보는 기능이 없는 것이다. ㅡ.ㅡ;;

해서 처음에 Feed 쪽에 kr-dev만 추가했다가 #kr-dev만 편애하냐는 핀잔을 받기 싫어서 인기있는 몇 몇 태그 생각나는 대로 넣어봤다. 

![](https://cdn.steemitimages.com/DQmNxrFJRVwYnepBREEPkqYAbmvPHjWPvfp3bjtfFzQL2vU/image.png)

![categorymm.gif](https://cdn.steemitimages.com/DQmPkPFMdEPdAxQTVwTiXiRZLqJgXrTNEsfxGxR6hWJmEdu/categorymm.gif)

아마도 저 태그들을 손볼수 있는 태그 에디터 기능을 넣을 생각이다. 순서 정렬과 원하는 태그를 넣는 기능이 추가 될것 같다. 

![](https://cdn.steemitimages.com/DQmderdX2tC5dRAUKDsbY2u7YvLXQU7vTwh2qGkeUrjczcy/image.png)

이렇게 Edit 기능을...

---

두번째로 Links들이 동작하게 링크를 걸어두었다. 계정명이 필요한 사이트들은 계정 선택한게 자동으로 들어간다. ㅎㅎㅎ

![](https://cdn.steemitimages.com/DQmcHpPrkRGoURjLgTRatpSPDXzooHTCsdnmLvbiJZEbdQu/image.png)

아직도 여러가지 몇몇 버그들이 보인다. 너무 조회 기능만 치중하다보니 글을 보는 거 자체는 큰 문제는 없지만 보팅을 하고 싶은데 못하는게 문제다.  스팀커넥트 연결이 절실해보인다... 물론 댓글을 보는 기능도 아직 없다. 시간 날때 하나하나 추가해봐야겠다. 그러다보면 좀 쓸만해질지도 모르겠다. 

주소 : 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>

~~~~
<br/>
2 포스팅 화면을 그려주고 나서 < pre>< code> 태그들을 선택하여 highlight.js를 이용해서 호출해주면 끝. ![](https://cdn.steemitimages.com/DQmWQuraRWTenCTesfpCh56ojJZxesDgJxumqmzr5GdoM1i/image.png)

~~~~
// 생략...
$('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
});
// 생략...
~~~~