trying to embed gist (github) in tiddler

Gavin Gamboa

unread,

Feb 19, 2021, 4:57:18 PM2/19/21

to TiddlyWiki

Hi TW users,

Does anyone know why the embed code for a gist doesn't display in a tiddler? I get an empty box returned. I tried wrapping in an <iframe> also.

This is the code I am trying to add:

macOS 10.13.6

Firefox 85.0.2

Soren Bjornstad

unread,

Feb 21, 2021, 2:41:51 PM2/21/21

to TiddlyWiki

AFAIK, <script> tags are not supported within tiddlers for security reasons. Iframes do work (I embed Google Maps in some of my tiddlers), but presumably not if they contain scripts. Is there some other way to embed a gist?

Donald Coates

unread,

Feb 23, 2021, 4:39:13 PM2/23/21

to TiddlyWiki

From a previous thread where I was having the same problem:

SOLUTION/WORKAROUND

WARNING: this requires changing a core tiddler. The code is there for a reason. My use case is very specific in that I will only be doing this on a wiki that runs just to render static tiddlers.

I noticed that the rendering process for the <script> tag renders as <safe-script>. So I just searched and found the tiddler responsible for the modification and commented out the code.

The tiddler is $:/core/modules/widgets/element.js and the code to comment out is

if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1)
{ tag = "safe-" + tag;
}

Again this would I imagine create a very serious security risk in wikis open to the internet.

I cannot stress enough that this could cause serious issues. Since it is a gist it may just be better to just copy/paste and avoid the potential for problems.

mMHog

unread,

Mar 8, 2021, 3:36:05 AM3/8/21

to TiddlyWiki

Hi!

I found a way to embed a gist into tiddler without a motify to $:/core

First, creat a file named "gist.html" with the following content and put it anywhere(local or web server):

<html>

<body>

function GetRequest() {

var url = location.search;

var theRequest = new Object();

if (url.indexOf("?") != -1) {

var str = url.substr(1);

strs = str.split("&");

for(var i = 0; i < strs.length; i ++) {

theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);

}

return theRequest;

}

var Request = new Object();

Request = GetRequest();

var id=Request["id"];

var user=Request["user"];

var usel = '<script src="'+"https://gist.github.com/"+user+"/"+id+".js"+'"><\/script>';

document.write(usel);

</script>

</body>

</html>

Then, creat a template tiddler "T/Gist" with the following content, remember to replace the path/to/your/gist.html to the url or local path of yourself:

<$set name="q" value={{{[[path/to/your/gist.html?user=]addsuffix{!!gist_user}addsuffix[&id=]addsuffix{!!gist_id}]}}}>

<$set name="myVariable" value="Some text">

<html><div align="center"><iframe src=<<q>> frameborder="0" width="100%" height="600"></iframe></div></html>

</$set>

It will use the field "gist_id" and "gist_user" and embed gist in tiddlers like this:

{{||T/Gist}}.

mMHog

unread,

Mar 8, 2021, 3:36:07 AM3/8/21

to TiddlyWiki

Here are the file required

在2021年2月24日星期三 UTC+8 上午5:39:13<digit...@gmail.com> 写道：

T_Gist.json

gist.html

mMHog

unread,

Mar 8, 2021, 5:17:33 AM3/8/21

to TiddlyWiki

Sorry for a syntax mistake of template tiddler, here is the correct one

<$set name="q" value={{{[[path/to/your/gist.html?user=]addsuffix{!!gist_user}addsuffix[&id=]addsuffix{!!gist_id}]}}}>

<html><div align="center"><iframe src=<<q>> frameborder="0" width="100%" height="600"></iframe></div></html>

</$set>

T_Gist.json

Gavin Gamboa

unread,

Mar 8, 2021, 7:21:07 PM3/8/21

to TiddlyWiki

wow. it works!

I do so appreciate you figuring this out. I have implemented the gists into the 'Software Notes' on my digital garden. I added a scrolling="no" declaration to the iframe to prevent the embed from having its own vertical scrollbar (horizontal scroll still works).

Reply all

Reply to author

Forward