Rev. 2.73

얼마 전 소개했던 PrismJS는 아직 HTML, CSS, JS만을 지원하고 있습니다. 지금 즈음 다른 언어를 지원하지 않을까 해서 살펴보니 역시나 있더군요. 제가 발견한 현재 확장 가능한 언어는 JAVA, PHP, Bash 그리고 모든 C 스타일 언어에 적용할 수 있는 Generic 등이 있습니다. 이 문법 강조 컴포넌트를 확장하려면 PrismJS를 포크한 각 개발자의 저장소에서 직접 가져와야 합니다. 몇몇 컴포넌트에서 사소한 문제를 발견했지만, 신속히 수정되고 있어 해결방법을 어렵지 않게 찾아낼 수 있었어요. 각 언어별 저장소 위치를 아래에 정리했습니다. PrismJS를 사용하는 분들은 참고하세요.

Bash - https://github.com/ktmud/prism/tree/gh-pages/components
JAVA - https://github.com/thomasklemm/prism/tree/gh-pages/components
Clojure - https://github.com/samflores/prism/tree/gh-pages/plugins
Vim - https://github.com/samflores/prism/tree/gh-pages/plugins
Ruby - https://github.com/samflores/prism/tree/gh-pages/plugins
PHP - https://github.com/Aaron3/prism/tree/php/components
Generic - https://github.com/Aaron3/prism/tree/generic/components
Okaidia(theme) - https://github.com/ocodia/prism/tree

언어를 추가하는 방법은 아주 간단합니다. 컴포넌트 또는 플러그인 폴더에 있는 해당언어의 소스를 prism.js에 추가해 주세요.

Comments

avgrund.png

Avgrund는 Dmitri Voronianski씨가 작성한 모달 박스를 출력하는 jQuery용 플러그인입니다. 모달 박스가 출연할 때 원래 페이지와의 깊이를 표현하는 흥미로운 개념을 도입했습니다. 이는 CSS에서 transition 그리고 transform 속성을 이용해서 구현한 것이에요. 사용방법은 다음과 같습니다:

$('element').avgrund();

// or with several options for customize

$('element').avgrund({			
	width: 380, // max is 640px
	height: 280, // max is 350px
	showClose: false, // switch to 'true' for enabling close button 
	showCloseText: '', // type your text for close button
	closeByEscape: true, // enables closing popup by 'Esc'..
	closeByDocument: true, // ..and by clicking document itself
	holderClass: '', // lets you name custom class for popin holder..
	overlayClass: '', // ..and overlay block
	enableStackAnimation: false, // another animation type
	onBlurContainer: '', // enables blur filter for specified block 
	template: 'Your content goes here..'
});

Comments

210938218g.jpg

HTML5 게임 프로그래밍은 Jacob Seidelin씨가 작성하고 webgenie(장현희)님이 현지화한 개발 서적으로, HTML5를 이용하여 완성도 높은 보석 퍼즐(비주얼드와 유사한) 게임을 만드는 과정을 소개하고 있습니다. 데스크탑/모바일용 브라우저를 지원하도록 하는 화면배치 및 이벤트 처리방법을 다루고 고급 CSS3 처리 기법과 HTML5 Audio, WebGL, Canvas, LocalStorage, WebSocket, WebWorker 등의 명세가 실제 게임을 제작하는 과정에 포함하고 있어 재미있게 학습할 수 있도록 구성된 것이 특징입니다. 그래서 자바스크립트를 어느정도 다룰 줄 안다는 전제하에 HTML5 명세를 이해하는 것이 아니라 사용하는 것에 초점이 맞추어져 있습니다.

선물로 득템하여 짬짬히 내용을 살피는 요 며칠동안 마치 게임을 직접 만드는 듯한 설렘을 느낄 수 있었습니다. HTML5의 모든 명세를 사용하기에는 역시 게임만한 것이 없는 것 같네요.

Comments