diff --git a/internal/web/handlers/gist/gist.go b/internal/web/handlers/gist/gist.go
index 83d557f..bd297a4 100644
--- a/internal/web/handlers/gist/gist.go
+++ b/internal/web/handlers/gist/gist.go
@@ -165,10 +165,39 @@ func escapeJavaScriptContent(htmlContent, cssUrl, themeUrl string) (string, erro
}
js := fmt.Sprintf(`
- document.write('');
- document.write('');
- document.write(%s);
- `,
+(function() {
+ if (!customElements.get('opengist-embed')) {
+ customElements.define('opengist-embed', class extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+
+ init(css1, css2, content) {
+ this.shadowRoot.innerHTML = %s
+
+
${content}
+ %s;
+ }
+ });
+ }
+
+ var currentScript = document.currentScript || (function() {
+ var scripts = document.getElementsByTagName('script');
+ return scripts[scripts.length - 1];
+ })();
+
+ const instance = document.createElement('opengist-embed');
+ instance.init(%s, %s, %s);
+ currentScript.parentNode.insertBefore(instance, currentScript.nextSibling);
+})();
+`,
+ "`",
+ "`",
string(jsonCssUrl),
string(jsonThemeUrl),
string(jsonContent),
diff --git a/public/css/embed.css b/public/css/embed.css
index c8f5522..bd54411 100644
--- a/public/css/embed.css
+++ b/public/css/embed.css
@@ -35,6 +35,14 @@
--border-width-1: 1px;
}
+@layer base {
+ :host {
+ --tw-border-style: solid;
+ --tw-border-width: 0;
+ display: block;
+ }
+}
+
.opengist-embed {
@import "tailwindcss";
@layer base {
@@ -50,4 +58,4 @@
@import './ipynb.css';
@import "./style.css";
}
-}
\ No newline at end of file
+}