diff --git a/assets/styles/03-elements/table.scss b/assets/styles/03-elements/table.scss
index 51567bbe8..12264ca11 100644
--- a/assets/styles/03-elements/table.scss
+++ b/assets/styles/03-elements/table.scss
@@ -8,6 +8,10 @@ table {
   border-image: var(--theme-border-image);
 }
 
+.highlight table {
+  width: 100%;
+}
+
 thead th {
   font: var(--theme-font--system);
   background-color: var(--theme-color--block);
diff --git a/layouts/_default/_markup/render-codeblock-runkit.html b/layouts/_default/_markup/render-codeblock-runkit.html
new file mode 100644
index 000000000..ba3a17bdc
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-runkit.html
@@ -0,0 +1,7 @@
+{{ $id := print "runkit-" (substr (md5 .Inner) 0 16) }}
+<script src="https://embed.runkit.com" data-element-id="{{ $id }}"></script>
+<div class="highlight">
+  <div style="background:var(--theme-color--paper);">
+    <div id="{{ $id }}" style="font-size:0;">{{ .Inner | safeHTML }}</div>
+  </div>
+</div>