Revision of Twine: mix HTML tags and Twine markup syntax from Thu, 06/06/2013 - 04:03

Just now I was thinking to myself, "Leon, why is it that HTML must be stuck between the tags in Twine, anyway? Would it be possible to make HTML usable intersperced with Twine syntax?" So I decided to give it a try. The resulting Javascript code is as follows:

(function () {
	var bs = String.fromCharCode(92);
	Wikifier.formatters.unshift({
			name: "htmltag",
			match: "<"+bs+"w+(?:(?:"+bs+"s+"+bs+"w+(?:"+bs+"s*="+bs+"s*(?:"+'"'+".*?"+'"'+"|'.*?'|[^'"+'"'+">"+bs+"s]+))?)+"+bs+"s*|"+bs+"s*)"+bs+"/?>",
			tagname: "<("+bs+"w+)",
			void: ["br", "hr", "area", "img", "input", "embed", "param", "source", "track"],
			handler: function (a) {
				var re, tn, e;
				re = new RegExp(this.tagname).exec(a.matchText);
				tn = re && re[1];
				if(tn) {
					e = document.createElement();
					e.innerHTML = a.matchText;
					e = e.firstChild;
					if(this.void.indexOf(tn) == -1) {
						a.subWikify(e, "<" + bs + "/" + bs + "s*" + tn + bs + "s*>");
					}
					a.output.appendChild(e);
				}
			}
		});
}());

This code will allow you to put HTML tags in Twine passage text, and have them function in the compiled game. Note: it requires all HTML tags to be properly closed, with the exception of the so-called "void tags" that have no closing pair (br, hr, area, img, input, embed, param, source, track). Unmatched end tags will be ignored!

Feel free to report any bugs to @webbedspace.

pensive-mosquitoes