오일러 프로젝트를 풀면서 포스팅에 붙이는 코드가 꽤 길어질 때가 있다. 그래서 접기 기능을 (임시방편으로) 구현해 놨다. 현재 홈 디렉터리에서 _includes 밑에 codehighlight.html 이 있고, 여기에 다음과 같이 추가.

디폴트 상태에서는 코드가 접혀있고 클릭하면 확장되게 만들었다.

$('.highlight').each(function( index){
		$(this).wrap( "<div class=\"highlight_toggle\"></div>");
		$(this).hide();
		});

$('.highlight_toggle').each(function(){
		$(this).append('<span class="toggle">&nbsp;</span>');
		$(this).wrapInner('<a href="#"></a>');
		});

$('.highlight_toggle a').click(function() {
		if( $('.highlight').is(":visible")) {
		$('.highlight').hide();
		}else{
		$('.highlight').show();
		}

		var offset = $(this).offset();
		$('html, body').animate({
scrollTop: offset.top,
scrollLeft: offset.left
})
		return false; 
		});

결과물은 간신히 쓸만한 정도. 부드럽게 접히고/펴지는 효과가 없으며, 한 코드를 누르면 다른 부분의 코드들도 다같이 접히거나 펴진다. 하지만 내 블로그에 쓸 코드라 편하게 만들고 싶은 만큼만 만들었다. 나중에 손 보지 뭐.

  • (2016/02/27) : 코드가 copy 가 안 되는 문제가 있어서, 코드를 접는 기능은 다시 빼두었다.