description html5game.rb

Usage in Jekyll

Save the code below and save it as html5game.rb in the folder _plugins in your Jekyll root directory. The tricky part is, that it expects a certain structure. I have coded it to look into the folder /games on my web root, then use the second parameter as folder and the last 2 parameters are the size of the canvas. Quick example:

{% htmlgame directory_under_games width height %}

Quite simple, but effective. Enjoy.


# Purpose:	Jekyll Plugin to display a html5 game/context via markdown
# Usage:	<div class="htmlgame card-panel center white-text extra-bottom"><iframe width="width" height="height" src=""></iframe></div>
# Note:		The script expects the context to live in your webroot in a folder called '/games'.
#			Replace this below if you have a different setup.
# Author:   Domeniko Gentner <>
module Jekyll
	module Tags
		class HTML5Game < Liquid::Tag
			def initialize(tag_name, markup, tokens)
				@arg = markup.gsub(/\s+/m, ' ').strip.split(" ")

			def render(context)
				#output = super(context)
				site_url = context.registers[:site].config['url']
				url = "#{site_url}/games/#{@arg[0]}/index.html"

				"<div class=\"htmlgame card-panel center white-text\"><iframe width=\"#{@arg[1]}\" height=\"#{@arg[2]}\" src=\"#{url}\"></iframe></div>"

Liquid::Template.register_tag('html5game', Jekyll::Tags::HTML5Game)

tweet gist  •  August 24 2019