구문 강조 스크립트 자동 적용

글에 <code> 태그를 사용하면서 구문강조 스크립트를 쓸 때 매번 드는 의문점이 있었으니... 그것은 바로 <code> 태그를 사용할 때는 100%> 구문강조가 필요한 상황인데도 매번 수작업으로 클래스를 지정해줘야 한다는 것.

예를 들어 google-code-prretify 를 사용하면 html편집기로  <code>나  <pre> 태그에  class="prettyprint" 속성을 지정해 줘야함.

이 번거롭기 짝이 없는 작업에서 탈출하기 위해 걍 쿨하게 모든 <code> 태그마다 자동으로 클래스를 추가하는 묘안을 생각해 내버린 거시여따. 나 좀 머리 좋은 듯 ㅎㅎ

예제

#0: .js

function prettyprint_class_add() { $('code').addClass('prettyprint'); $('code > xmp').addClass(function(){$(this).parent().removeClass('prettyprint'); return 'prettyprint';}); $('code > pre').addClass(function(){$(this).parent().removeClass('prettyprint'); return 'prettyprint';}); $('pre > code').removeClass(function(){$(this).parent().addClass('prettyprint'); return 'prettyprint';}); } $(window).load(function() { prettyprint_class_add(); prettyPrint(); });

#1: 인라인 <code>

인라인 요소에서는 function jinh() { visitor++; } 이렇게.

#2: <code> 내부의 <xmp>

// 블록 요소에서는 function jinh() { visitor++; } //이렇게.

#3: <code> 내부의 <pre>

// <pre> 요소 내부에서는
function jinh() { 
	visitor++; 
}
// 다른 태그가 작동해서 <xmp>를 선호함.

#4: <pre> 내부의 <code>

// <code>가 <pre> 안에 포함되어도
function jinh() { 
	visitor++; 
}
// 알아서 블록 요소로 얍얍.

야 편리하다!

끝.