워드프레스에 jsfiddle 코드 표시하기

jsfiddle은 웹의 프론트엔드 기술인 HTML, CSS, 자바스크립트를 웹에서 작성해서 바로 테스트하고 소스를 저장 공유할 수 있는 서비스입니다. jsfiddle의 임베드 기능을 사용하여 워드프레스에 jsfiddle 코드 표시가 가능합니다.

워드프레스에 jsfiddle 코드 표시하기(jsfiddle 코드 공유)

웹에서 HTML, CSS, Javascript를 작성하여 테스트하고 소스를 공유하고 싶은 경우 jsfiddle 서비스를 이용하면 편리합니다. 다음 생활코딩 동영상에서 기본적인 사용법을 살펴볼 수 있습니다.

2012년에 만든 영상이라 최신 jsfiddle 인터페이스와는 차이가 있지만 기본적인 사용법을 이해할 수 있을 것입니다.

워드프레스에 jsfiddle 코드 공유하기

플러그인을 사용하지 않고 워드프레스나 웹에 jsfiddle 코드를 공유하고 싶은 경우 jsfiddle의 임베드 기능을 사용하면 됩니다.

소스를 공유할 jsfiddle 페이지에서 상단의 Embed 메뉴를 클릭합니다.

워드프레스에 jsfiddle 코드 표시하기 - jsfiddle 공유하기

Tabs 섹션에서 표시한 요소를 선택/해제할 수 있습니다. 예를 들어, JavaScript가 없는 코드 스니펫이라면 JavaScript를 해제하도록 합니다.

Visual 섹션에서는 라이트 모드(밝은 색상)와 다크 모드(어두운 색상)를 선택할 수 있습니다. 메뉴 폰트 컬러 등을 사용자 지정할 수 있습니다.

Embed snippet에서는 임베드 코드 형식을 선택할 수 있습니다. 기본적으로 다음과 같은 스크립트 코드가 제시됩니다.

<script async src="//jsfiddle.net/learningforever/9rL16s1q/embed/html,css,result/dark/"></script>

Prefer iframe?을 클릭하여 아이프레임 형식으로 코드를 공유할 수 있습니다.

<iframe width="100%" height="300" src="//jsfiddle.net/learningforever/9rL16s1q/embedded/html,css,result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

워드프레스에서 iframe 코드를 공유하려면 사용자 정의 HTML 블록에 코드를 추가하면 됩니다. 고전 편집기를 사용하는 경우 편집기에서 텍스트 모드로 전환한 후에 iframe 코드를 적당한 곳에 붙여넣기 하도록 합니다.

워드프레스 사용자 정의 HTML 블록

다음 영상을 참고하여 사용자 정의 HTML 블록을 원하는 곳으로 끌어다 놓으시기 바랍니다.

또는, 시간과 능률을 향상시키는 워드프레스 구텐베르크 키보드 단축키 글을 참고하여 키보드 단축키를 사용하는 것도 가능합니다.

다음은 iframe 형식으로 js-fiddle 코드를 공유한 예시입니다.

다크 모드로 지정했고 JavaScript 탭은 제외시켰습니다. HTML 탭, CSS 탭, Result 탭을 선택하여 소스 코드와 결과를 확인할 수 있습니다.

JSFiddle Shortcode 플러그인

JSFiddle Shortcode라는 jsfiddle을 숏코드로 추가할 수 있는 플러그인이 있습니다. 이 플러그인을 사용하면 간단한 숏코드로 Fiddle을 삽입할 수 있습니다.

예시:

[jsfiddle url="http://jsfiddle.net/wvega/UupFu/" height="300px" include="result,html,js,css" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]

위와 같은 숏코드를 추가하면 다음과 같은 iframe으로 변환하여 js-fiddle 소스 코드를 프런트엔드에 표시합니다.

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/wvega/UupFu/embedded/result,html,js,css/?fontColor=39464E&menuColor=FFFFFF&bodyColor=f3f5f6&accentColor=1C90F3"></iframe>

이 플러그인을 다운로드하여 살펴보니 약 2년 전에 업데이트되었네요. 최신 워드프레스 버전에서 문제 없이 작동하는지는 확인해보지 않았습니다. 잘 작동하지 않으면 플러그인 개발자에게 문의해보시기 바랍니다.

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.