[기타]블로그 코드 하이라이트(highlight,gist)

블로그를 운영하면서 게시글로 코드를 작성할때 흔히 SyntaxHighlighting 을 사용하였습니다.

 

제 블로그에서도 이전에 SyntaxHighlighting 을 사용하여 코드에 하이라이트를 주는 방법을 소개해 드렸는데요..

 

자꾸보다보니 질려서인지.. 아니면 이쁘지않아서인지 더이상 쓰고 싶지가 않았습니다.

 

그래서 오늘은 다른 방법으로 highlight.js 와 gist.git 을 사용하는 방법을 소개합니다.

 

1. highlight.js

#include<iostream>
using namespace std;

int main()
{
    ios::sync_with_stdio(false);
}

1. 홈페이지에서 다운로드를 받아줍니다.

highlight.js

 

highlightjs.org

2. 압축을 풀고 압축폴더안의 highlight.pack.js 와 style 폴더안의 css파일을 블로그관리-스킨편집-html편집-파일업로드 에서 추가하여줍니다.(예시용으로 github-gist.css 사용)

3. 블로그관리-스킨편집-html편집-HTML 에서

태그와 

태그 사이에 코드를 넣습니다.

<pre><code> 코드 </code></pre>

2. gist

사실 gist를 이용하여 코드를 올리는것이 가장 편한것같습니다.

<table class="txc-table" width="813" cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 813px;" 맑은="" 고딕",="" sans-serif;font-size:15px"="">

gist 에 코드를 올리고 create 한 뒤 스크립트를 가져와야 하는 번거로움이 있긴 하지만 SyntaxHighlighting 이건 highlight 이건 둘 다 html 에서 코드 안의 꺽쇠(< >)를 태그로 인식하여 코드가 깨져서 나오는 현상이 발생하니 html 에서 <는 < >는 > 로 변환해 주는 작업을 해야합니다. 때문에 그냥 gist에 옮긴 뒤 스크립트를 가져오는게 오히려 편합니다.

1. gist를 사용하기위해 해당 페이지로 갑니다.

Build software better, together

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.

gist.github.com

사진과같이 제목을 작성하면 해당하는 확장자명에 맞춰 자동으로 하이라이트가 적용됩니다.

이후 create 를 하면

위와같이 코드가 만들어지고 스크립트 를 복사한 뒤

이렇게 코드를 올리면 됩니다.

그럼 이렇게 깔끔한 코드가 나오게 되고 이후 gist 에서 내가 만든 코드를 관리할수 있습니다.

이상으로 블로그 코드 하이라이트 기능 두가지를 알아보았습니다. SyntaxHighlighting 으로 된 하이라이트를 모두 바꾸려고 생각하니 막막합니다.. 다행이 게시물이 별로없긴해서 ㅜㅜ

 

ps. css를 가져와 하이라이트 기능을 사용할때 꺽쇠(< >) 가 먹히지 않는 상황을 해결하기위한 방법몇가지를 알려드립니다. http://www.elliotswan.com/postable/ 에 가서 코드를 붙여넣은뒤 make 하면 모든 꺽쇠가 < > 로 바뀝니다. 즐찾추가 ㄱㄱ 또는 게시글 작성시 html 모드에서 코드를 붙여넣은 뒤 <textarea></textarea>로 감싸주고 저장하면 꺽쇠가 < 로 변하는데 수정으로 <textarea></textarea>를 제거한뒤 다시 저장하면 된다.  쉬운방법으로 HTML 모드에서 <pre><code> 내용 </code></pre>만 작성해두고 편집기로 돌아와 내용부분에 코드를 넣는 밥법이다 . (이게제일 간단한듯) 그럼 자동으로 꺽쇠는 해당 코드로 치환된다.