How to add jsFiddle plugin on jekyll

Updated:
Categories: Blog
Tags: #Jekyll

Jekyll 포스트에 jsFiddle 넣기 위한 Plugin 적용 방법Permalink

_plugins 폴더에 jsfiddle.rb 파일을 만들고, 다음 코드 넣어줌

# Title: jsFiddle tag for Jekyll
# Author: Brian Arnold (@brianarn)
# Update: Jungbin Kim
# Description:
# Given a jsFiddle shortcode, outputs the jsFiddle iframe code.
# Using 'default' will preserve defaults as specified by jsFiddle.
#
# Syntax: {% jsfiddle shorttag [tabs] [embedWay] [skin] [height] [width] %}
#
# Examples:
#
# Input: {% jsfiddle ccWP7 %}
# Output: <script async src=\"//jsfiddle.net/ccWP7/embed/js,resources,html,css,result/dark/"></script>
#
# Input: {% jsfiddle ccWP7 js,html,result iframe %}
# Output: <iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/ccWP7/embedded/js,html,result/light/"></iframe>
#
module Jekyll
class JsFiddle < Liquid::Tag
def initialize(tag_name, markup, tokens)
if /(?<fiddle>\w+\/?\d?)(?:\s+(?<sequence>[\w,]+))?(?:\s+(?<embedWay>\w+))?(?:\s+(?<skin>\w+))?(?:\s+(?<height>\w+))?(?:\s+(?<width>\w+))?/ =~ markup
@fiddle = fiddle
@sequence = (sequence unless sequence == 'default') || 'js,resources,html,css,result'
@embedWay = (embedWay unless embedWay == 'default') || 'script'
@skin = (skin unless skin == 'default') || 'dark'
@width = width || '100%'
@height = height || '300px'
end
end
def render(context)
if @fiddle
if @embedWay == 'iframe'
"<iframe style=\"width: #{@width}; height: #{@height}\" src=\"//jsfiddle.net/#{@fiddle}/embedded/#{@sequence}/#{@skin}/\"></iframe>"
else
"<script async src=\"//jsfiddle.net/#{@fiddle}/embed/#{@sequence}/#{@skin}/\"></script>"
end
else
"Error processing input, expected syntax: {% jsfiddle shorttag [tabs] [skin] [height] [width] %}"
end
end
end
end
Liquid::Template.register_tag('jsfiddle', Jekyll::JsFiddle)
view raw jsfiddle.rb hosted with ❤ by GitHub

Fork from octopress’s plugin

Comments