[블로그] 블로그에 소스 코드 이쁘게 올리는 방법 (소스코드 하이라이터, highlighter)

블로그를 IT 관련 새로 시작하면서 소스코드를 블로그에 자주 넣을 것으로 예상이 되었습니다.

소스코드를 각 프로그래밍 언어별 문법에 맞게 예쁘게 하이라이트를 주는 블로그를 많이 보았어서

새로 시작하는 블로그에서는 자주 활용하고 싶었던 마음도 있었습니다. 

잘 모르시는 분들을 위해..

하이라이트란? 쉽게 얘기하면 각 문법의 예약어, 명령어 등을 다른 색으로 표현하여

가시성을 높여줘 프로그래밍에 도움이 되도록하는 것입니다. 

예를 들어 아래와 같은 코드가 있을 경우

int a = 1;
print (a);

여기에 하이라이트를 적용할 경우 아래와 같이 이쁘게 표현이 됩니다. 

int a = 1;
print (a);

자, 그러면 네이버 블로그, 티스토리 블로그, 워드프레스, 구글 등등 다양한 블로그에서 

사용되는 하이라이트 라이브러리들을 알아보도록 하겠습니다. 

1. syntaxhighlighter

아마 가장 유명한 소스코드 highlighter가 아닐까 싶습니다. 

많은 블로그에서 많이 사용되는 highlighter로

버전 4.0.1까지 나왔으나 그 이후에 업데이트가 되지 않은 것 같습니다. 

url : https://github.com/syntaxhighlighter/syntaxhighlighter

게다가 4.0대 syntaxhighlighter 를 build하는 과정에서 dependency package를 

다운받는 과정에서 없어진 package가 있어 4.0.1 build는 포기하고

3.0.83을 다운받아서 블로그에 적용하였습니다. 

syntaxhighter 4.0 build 에러와

3.0.83 적용하는 법은 다음 블로그에 정리하도록 하겠습니다. 

<sample>

if __name__ == "__main__":
    # 로그 파일 핸들러
    fh_log = TimedRotatingFileHandler('logs/log', when='midnight', encoding='utf-8', backupCount=120)
    fh_log.setLevel(logging.DEBUG)

    # 콘솔 핸들러
    sh = logging.StreamHandler()
    sh.setLevel(logging.DEBUG)

2. highlight

몇몇 검색했던 하이라이터 중에 맘에 들었던 녀석입니다. 

위의 syntaxhighlighter보다도 나은 점이 많아 보입니다. 

우선 사이트에서 지속적인 업데이트가 이루어 진다는 점.

그리고 CSS가 훨씬 다양하다는 점이 훌륭합니다. 

저는 1) syntaxhighlighter와 2)highlight 2가지를 모두 사용할 예정입니다. 

highlight에 대한 설정도 다음 블로그에 남기도록 하겠습니다. 

url : https://highlightjs.org/

<sample>

if __name__ == "__main__":
    # 로그 파일 핸들러
    fh_log = TimedRotatingFileHandler('logs/log', when='midnight', encoding='utf-8', backupCount=120)
    fh_log.setLevel(logging.DEBUG)

    # 콘솔 핸들러
    sh = logging.StreamHandler()
    sh.setLevel(logging.DEBUG)

3. colorscripter.com

위의 1, 2번 라이브러리들은 javascript 파일을 받아서 각 블로그에 적용시키는 방식으로 

javascript에서 html에 있는 태그를 찾아 CSS를 적용시키는 방식이라면, 

3번 colorscipter.com은 CSS 등으로 설정해야 할 부분을 html tag에 직접 작성되어 있는 모습으로 

따로 블로그에 javascript, CSS 파일을 블로그에 추가할 필요가 없이

웹사이트에서 해당 테마에 맞게 변환을 시켜주어서 바로바로 확인이 가능하다는 장점도 있습니다. 

게다가 국내 홈페이지입니다. ㅎㅎ

다만 매번 변환을 하여 복사&붙여넣기를 해줘야하는 번거로움과

html 태그가 길어지는 안좋은 모습은 감수해야합니다. 

url : https://colorscripter.com

<samsple>

if __name__ == "__main__":
    # 로그 파일 핸들러
    fh_log = TimedRotatingFileHandler('logs/log', when='midnight', encoding='utf-8', backupCount=120)
    fh_log.setLevel(logging.DEBUG)
    # 콘솔 핸들러
    sh = logging.StreamHandler()
    sh.setLevel(logging.DEBUG)

4. hilite.me

마지막으로 소개해드릴 하이라이트 역시 web 방식으로 심플한 사이트입니다. 

그다지 큰 장점은 없어보이나 web 방식이라는 점 때문에 작성했습니다. 

url : http://hilite.me/

<sample>

if __name__ == "__main__":
    # 로그 파일 핸들러
    fh_log = TimedRotatingFileHandler('logs/log', when='midnight', encoding='utf-8', backupCount=120)
    fh_log.setLevel(logging.DEBUG)

    # 콘솔 핸들러
    sh = logging.StreamHandler()
    sh.setLevel(logging.DEBUG)

5. 그 외 

구글에서 개발한 code-prettify

https://github.com/google/code-prettify

깔금한 라이브러리 방식의 prismjs. 

역시 추천하는 하이라이터입니다. 

https://prismjs.com/index.html

등등이 있으나 굳이 여러개를 사용할 필요는 없어서 

prismjs 까지만 적용하였습니다. 

<prismjs의 sample>

if __name__ == "__main__":
    # 로그 파일 핸들러
    fh_log = TimedRotatingFileHandler('logs/log', when='midnight', encoding='utf-8', backupCount=120)
    fh_log.setLevel(logging.DEBUG)

    # 콘솔 핸들러
    sh = logging.StreamHandler()
    sh.setLevel(logging.DEBUG)

그리고 각각의 사용방식이 조금씩 달라서 중복 사용이 가능합니다. 

그 외의 하이라이터를 비교해보고 싶으신 분들은 아래의 URL을 참고하시면 좋을 것 같습니다. 

https://webdesign.tutsplus.com/articles/25-syntax-highlighters-tried-and-tested--cms-23931