jQuery를 이용해서 코드의 모양새(style)를 자동으로 바꾸어 주기

Apple, Mac & iOS, CSS, JavaScript, Notes, Quotes, WordPress 댓글 달기

예전에는 블로그 글에 포함된 코드의 문법을 색깔별로 구분하기 쉽게 표시되도록 WordPress의 plugin인 iG:Syntax Hiliter를 사용했었다. 하지만, 보이는 코드의 모양도 별로 마음에 들지 않거니와 코드 속에 쓸데없이 자동으로 포함되는 특정 요소 관련 링크들은 오히려 코드의 해석을 어렵게 하고, 문서의 구조까지 해치는 부작용이 있었다. 물론 지원되는 언어들도 한정적이었고.

그래서, 바램이었다면 평소 애용하는 TextMate를 이용해서 지원하는 여러 가지 다양한 테마들에서 보이는 코드의 모양을 그대로 블로그에도 옮겨놓을 수 없을까 궁금해하던 차에, 찾아보니 딱 내가 바라던 방법을 소개해 놓은 글을 발견하게 되었다. 그 후로 소개된 요령을 참고 해서 이미 올려두었던 코드들을 일일이 바꾸면서 이곳에도 비슷하게 적용해서 만족하게 사용하고 있다. 물론 코드를 올릴 일이 있으면 그 전에 TextMate에서 또 한 번의 변환 과정이 필요하지만 “Create HTML From Selection” 메뉴에 단축키만 지정해 두면 이것 또한 번거로운 작업은 아니다.

그런데, 사람의 욕심은 끝이 없어서인지 작업은 여기서 멈추지 않고, 이렇게 변환돼서 예쁘게 올려진 코드라도 실제로 쓰려고 복사할 때는 줄 바꿈이라든지 코드의 원래 모양이 제대로 전달되지 못하는 부작용이 있을 수 있다. 이것을 해결하기 위해서는 블로그에서 코드의 원래 모양을 그대로 전달해 주는 또 하나의 간단하면서도 깨끗한 버전의 모양새를 선택할 수 있게 해야 하는데, 일반적으로 떠오르는 방법으로 JavaScript의 힘을 빌려 새로운 창에 보여주는 방법이 있지만, 이것도 그리 깔끔한 방법은 아닌 듯 보였다.

마침, 요새 주무르고 있는 jQuery에서 제공하고 있는 몇 가지의 동작 효과들을 사용하면 간단하게 원하는 기능을 구현할 수 있을 것 같아서 바로 적용해 보았고, 참고를 위해 그 적용 방법을 여기에도 남겨둔다.

대략적인 기능의 구현은, 우선 웹 브라우저가 페이지를 다 읽어들이고 나면 페이지 속의 <pre class=”textmate-source”>로 둘러싸인 TextMate에서 뽑아 올려둔 코드를 찾아서 바로 위에 <div class=”code-style-switcher”> 단락을 추가하게 되는데, 이놈은 마우스를 누르면 새로운 모양새의 코드를 보여주는 일종의 방아쇠 장치가 된다. 방아쇠를 당기면 jQuery의 SildeUp 효과를 적용해서 현재 보이는 코드 단락을 감춘 후에, 새로운 코드의 모양새를 정의하는 CSS class를 적용하고 다시 SlideDown 효과로 감춰두었던 코드 단락을 보여주게 된다.

먼저, jQuery의 기능을 블로그에서 사용하기 위해 압축된 최신 jQuery Library의 JavaScript 파일(js)을 받아서 블로그가 위치한 서버 디렉토리의 적당한 곳에 옮겨놓은 후, 블로그 html 문서의 <head> 안에 다음과 같은 코드를 추가한다. (여기서, src 부분은 아까 jQuery의 js 파일을 옮겨놓은 곳의 위치와 파일 이름에 알맞게 고쳐준다.)

<script src="/blog/wp-content/themes/appletree/jquery.js" type="text/javascript" charset="utf-8"></script>

다음에는 역시 <head> 안에 실제 코드의 모양새를 바꾸어 주는 기능을 하는 다음과 같은 JavaScript 코드를 추가해 준다.

<script type="text/javascript">
// <![CDATA[ 
  $(document).ready(function() {
    $('pre.textmate-source').before('<div class="code-style-switcher simple-code"><a href="#content">코드 모양새 바꾸기<\/a><\/div>');
    $('div.code-style-switcher').click(function() {
      $(this).next().slideUp('fast', function() {
        $(this).toggleClass('simple-source').toggleClass('textmate-source').slideDown('slow');
      });
 
      $(this).toggleClass('simple-code').toggleClass('pretty');
      return false;
    });
  });
// ]]> 
</script>

참고로 여기서,

 
$('div.code-style-switcher').click(function() {
  $(this).next().slideUp('fast', function() {
    $(this).toggleClass('simple-source').toggleClass('textmate-source').slideDown('slow');
  });

부분은 방아쇠(<div class=”code-style-switcher”>)를 마우스로 누르면, 바로 밑에 있는 node- next() -에 위치한 <pre>로 감싸진 TextMate 코드를 slildeUp 효과로 감춘 후에, 감추는 작업의 callback method로서 코드를 포함하고 있는 <pre> 단락의 class를 simple-source로 혹은 textmate-source으로 번갈아서 바꾸어 주고, 마지막에 sildeDown 효과를 이용해서 코드를 보여주게 된다.

마찬가지로,

$(this).toggleClass('simple-code').toggleClass('pretty');

부분도, $(this) 즉 <div class=”code-style-switcher simple-code”>에 simple-code와 pretty class를 번갈아 추가하고 없애주는 역할을 하게 된다. (pretty class를 추가하는 이유는 링크의 배경 그림을 마우스로 누를 때마다 서로 바꿔주기 위함.)

마지막으로, 코드 모양새를 바꾸어 주는 방아쇠 역할을 하는 <div> 부분과 그 속의 링크 그리고 간단한 버전의 코드 모양새(pre.simple-source)를 위한 CSS 정의를 다음과 같이 추가해 주면 되는데, 이것은 TextMate에서 생성해서 블로그에 붙여주었던 CSS 파일에 추가해 주면 적당할 것이다.

/* Switch TextMate code style */
div.code-style-switcher {
  position: relative;
  height: 20px;
  padding: 3px 0 1px 0;
  margin: -10px 0 -8px 0;
  cursor: pointer;
}
 
div.simple-code { background: transparent url(images/simple_code.png) no-repeat left center; }
div.pretty { background: transparent url(images/pretty_code.png) no-repeat left center; }
 
div.code-style-switcher a {
  padding-left: 20px;
  text-decoration: none;
}
 
pre.simple-source {
  margin: 4px 0;
  padding: 10px;
  font-family: Courier, monospace;
  font-size: 1.15em;
  line-height: 1.4;
  color: #000;
}

참고로, 링크의 배경 그림으로 사용된 아이콘은 famfamfam.com에서 제공하고 있는 Silk 아이콘들 중에서 가져왔다.

지금까지 설명한 작업은 물론 다른 JavaScript Library를 써도 비슷하게 구현할 수 있을 것이고, 중요한 것은 어느 정도 성숙되어가고 있는 여러 JavaScript Library들의 힘을 빌면 과거 번거롭고 가능성으로만 머물었던 작업들도 훨씬 구현하기 쉬워져서 그 활용도가 한 층 더 넓어지리라는 것이다.

JavaScript의 오남용은 오히려 사용자한테는 접근성을 해칠 우려가 있다. 하지만, 점진적인 기능의 개선과 기능 생략이 곧 접근성 해체로 돌아오지 않다면 결국은 풍요로운 사용자 체험을 제공해 주리라 믿는다.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요