hexo jsfiddle tag를 호출하지 못하는 현상

공식 문서에 따르면 jsFiddle tag의 사용법은 이렇다.

1
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

대괄호로 둘러 쌓인 부분은 생략이 가능하다.

shorttag는 URL 창에서 바로 보여질 수도 있지만 그렇지 않을경우
Save 또는 Update 버튼을 누르면 나오는 Embed 메뉴에서 확인할 수 있다.

문제점

https인 github.io에서 http로 jsfiddle을 호출해서 차단된다.

해결

node_module\hexo\lib\plugins\tag\jsfiddle.js 파일의 jsfiddle 치환 함수를 변경한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function jsfiddleTag(args, content) {
var id = args[0];
var tabs =
args[1] && args[1] !== 'default' ? args[1] : 'js,resources,html,css,result';
var skin = args[2] && args[2] !== 'default' ? args[2] : 'light';
var width = args[3] && args[3] !== 'default' ? args[3] : '100%';
var height = args[4] && args[4] !== 'default' ? args[4] : '300';

// http://jsfiddle.net > //jsfiddle.net
return (
'<iframe scrolling="no" width="' +
width +
'" height="' +
height +
'" src="//jsfiddle.net/' +
id +
'/embedded/' +
tabs +
'/' +
skin +
'" frameborder="0" allowfullscreen></iframe>'
);
}