블로그 소스 Github 공유 및 소스코드 스타일을 위한 JS 라이브러리.적용

소스를 관리하는 툴로 요즘 가장 좋은 평가를 받고 있는것은 Git이 아닌가 싶습니다.
전부터 Git을 써보자.. 라는 마음은 있었지만 프로젝트들이 SVN을 주로 사용하는 프로젝트가 많아 Git을 쓸 기회가 없었는데요.

이번에 블로그를 전체적으로 개편하면서 소스를 체계적으로 관리해보자라는 측면에서 Github를 통해 소스들을 공유하고,
나아가 얼마전부터 소스코드 스타일 적용하느라 사용하던 라이브러리가 정상적으로 동작하지 않아 새로운 소스코드 스타일 라이브러리를 사용하며, 소스코드 스타일 라이브러리를 적용할 수 있는 저만의 라이브러리를 만들어 보았습니다.

---

블로그를 통해 공유하고 있는 소스들은 주로 제가 직접 사용하기 위해 만든 소스들이 많은데요.
그런만큼 블로그를 통해 공유한 이후에도 지속적인 수정과 개선을 위해 업데이트가 되고 있는 상황입니다.

마침 이번에 대대적인 블로그 개편을 하며, 이런 소스들을 체계적으로 관리할 필요성을 느껴 평소 관심만 두던 Git을 사용해볼 겸 Github를 통해 소스를 관리하기로 하였습니다.

아마도 처음 접하는 서비스와 소스관리 체계를 만들어 가는 와중의 많은 시행착오를 격을 것 같은데요.

그래도 이런 경험이 소중한 바탕이 되었으면 하네요.

앞으로 포스팅할 많은 소스들을 포함하여 이전에 올린 소스들을 하나하나씩 아래 Github에 올릴 예정입니다.

https://github.com/g1s/blog.g1s.kr

그리고 두번째로 웹에 소스코드를 공유 시 가독성을 높이기 위한 스타일을 적용했었는데요.
이전에 사용하던 라이브러리가 로드하던 javascript 를 닫아버림으로써 동작을 안하게 되어 소스코드 스타일 라이브러리를 사용하기 위해서
라이브러리를 로드하는 라이브러리(??)를 만들었습니다.

이번에 사용한 라이브러리는 Google code prettify 라는 라이브러리로 2013년 버전이 현재 마지막 버전인 것 같네요.

https://code.google.com/archive/p/google-code-prettify/

이전에는 해당 라이브러리도 javascript 파일을 서버에 공개해 script 태그로 javascript를 끌어와서 사용할 수 있었던 것 같은데요.

현재는 해당 서버를 닫아버리고 라이브러리 파일을 다운받을 수 있도록 제공하고 있네요.
이에 마침 테스트용으로 결재를 해 놓은 서버가 있어서 해당 소스를 다운받아 서버에 올려놓았습니다.

그리고 소스코드 스타일을 적용하고자 하면 동적으로 해당 script를 다운로드해서 스타일을 적용하도록 G1sCode라는 라이브러리를 만들었습니다.

G1sCode 소스

위 링크의 'Github'를 클릭하시면 해당 Github 경로로, 'LAW Data'를 클릭하시면 Github에서 제공하는 소스의 Law Data를 보실 수 있습니다.

그리고, '소스보기'를 클릭하시면 Law Data를 동적으로 받아서 소스코드 스타일을 적용한 것을 보실 수 있습니다.

네, Github에서 소스를 연동해 위와 같이 보여주는 기능도 역시 G1sCode에 적용을 한 상태입니다.

위 소스는 jQuery와 제가 현재 만들어 가고 있는 javascript 유틸인 G1sUtil.js 가 필요합니다.
G1sUtil.js는 앞으로 제가 만들 라이브러리 들에 기본이 될 파일로 다음 Github 경로에서 받을 수 있습니다.

https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/common/js/G1sUtil.js

해당 소스에 대한 사용법은 아래와 같습니다.

<!-- 별도 script 없이 pre 태그에 g1sCode class 적용.-->
<pre class='g1sCode lang-html'>
  alert('hello G1sCode');
</pre>

<!-- 스타일을 적용할 태그를 지정 -->
<pre id='G1sCodeTest1' class='lang-html'>
  alert('hello G1sCode1');
</pre>
<script>
  G1sCode.render($('#G1sCodeTest1'));
</script>

<!-- 소스를 다운받아 지정한 태그에 보여주기 -->
<pre id='G1sCodeTest2' class='lang-html'></pre>
<script>
  G1sCode.down($('#G1sCodeTest2'), 'https://raw.githubusercontent.com/g1s/blog.g1s.kr/master/G1sBlog/widget/simple/G1sCode.html');
</script>

<!-- Github의 소스 경로 이동 및 소스 다운받아 보여주기 -->
<div id='G1sCodeTest3'></div>
<script>
  G1sCode.github($('#G1sCodeTest3'), 'https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/widget/simple/G1sCode.html');
</script>

소스를 보시면 제가 올려놓은 서버의 경로가 보일텐데요.
아무래도 테스트 용도로 저렴하게 구입한 거라 트래픽을 많이 감당하지는 못합니다.

혹시 제 소스를 가져다 쓰시고 싶으신 분이 있으시다면,
적용하고자하는 사이트의 트래픽을 고려해서 Google code prettify에서 별도로 라이브러리를 다운받아 사용하여 주시기 바랍니다.

트래픽이 과도하게 초과되면 js 파일이 막힐 수도 있을 것 같네요....