menu

글에 <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++; 
}
// 알아서 블록 요소로 얍얍.

야 편리하다!


끝.

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

안녕하세요
반가워요
환영합니다 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH