diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx
index f1b7917da..85c9ab01b 100644
--- a/app/javascript/article-form/articleForm.jsx
+++ b/app/javascript/article-form/articleForm.jsx
@@ -1,6 +1,7 @@
 import 'preact/devtools';
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
+import postscribe from 'postscribe';
 import ImageUploadIcon from 'images/image-upload.svg';
 import ThreeDotsIcon from 'images/three-dots.svg';
 import { submitArticle, previewArticle } from './actions';
@@ -18,6 +19,29 @@ import OrgSettings from './elements/orgSettings';
 import Errors from './elements/errors';
 
 export default class ArticleForm extends Component {
+  static handleGistPreview() {
+    const els = document.getElementsByClassName('ltag_gist-liquid-tag');
+    for (let i = 0; i < els.length; i += 1) {
+      postscribe(els[i], els[i].firstElementChild.outerHTML);
+    }
+  }
+
+  static handleRunkitPreview() {
+    const targets = document.getElementsByClassName('runkit-element');
+    for (let i = 0; i < targets.length; i += 1) {
+      if (targets[i].children.length > 0) {
+        const preamble = targets[i].children[0].textContent;
+        const content = targets[i].children[1].textContent;
+        targets[i].innerHTML = '';
+        window.RunKit.createNotebook({
+          element: targets[i],
+          source: content,
+          preamble,
+        });
+      }
+    }
+  }
+
   constructor(props) {
     super(props);
     this.article = JSON.parse(this.props.article);
@@ -55,7 +79,7 @@ export default class ArticleForm extends Component {
   }
 
   componentDidMount() {
-    const { version } = this.state
+    const { version } = this.state;
     const previousContent = JSON.parse(
       localStorage.getItem(`editor-${version}-${window.location.href}`),
     );
@@ -80,6 +104,14 @@ export default class ArticleForm extends Component {
     // myCodeMirror.setSize('100%', '100%');
   }
 
+  componentDidUpdate() {
+    const { previewResponse } = this.state;
+    if (previewResponse) {
+      this.constructor.handleGistPreview();
+      this.constructor.handleRunkitPreview();
+    }
+  }
+
   checkContentChanges = previousContent =>
     this.state.bodyMarkdown !== previousContent.bodyMarkdown ||
     this.state.title !== previousContent.title ||
@@ -87,7 +119,7 @@ export default class ArticleForm extends Component {
     this.state.tagList !== previousContent.tagList;
 
   localStoreContent = () => {
-    const { version, title, tagList, mainImage, bodyMarkdown } = this.state
+    const { version, title, tagList, mainImage, bodyMarkdown } = this.state;
     localStorage.setItem(
       `editor-${version}-${this.url}`,
       JSON.stringify({
@@ -146,19 +178,19 @@ export default class ArticleForm extends Component {
         helpShowing: false,
         previewResponse: response,
         errors: null,
-      });  
+      });
     } else {
       this.setState({
         errors: response,
         submitting: false,
-      });  
+      });
     }
   };
 
   handleOrgIdChange = e => {
     const organizationId = e.target.selectedOptions[0].value;
-    this.setState({ organizationId })
-  }
+    this.setState({ organizationId });
+  };
 
   failedPreview = response => {
     console.log(response);
@@ -179,7 +211,7 @@ export default class ArticleForm extends Component {
   };
 
   removeLocalStorage = () => {
-    const {version} = this.state
+    const { version } = this.state;
     localStorage.removeItem(`editor-${version}-${this.url}`);
     window.removeEventListener('beforeunload', this.localStoreContent);
   };
@@ -204,11 +236,9 @@ export default class ArticleForm extends Component {
     if (e.keyCode === 13) {
       e.preventDefault();
     }
-  }
+  };
 
-  handleBodyKeyDown = e => {
-
-  }
+  handleBodyKeyDown = _e => {};
 
   onClearChanges = e => {
     e.preventDefault();
@@ -275,14 +305,19 @@ export default class ArticleForm extends Component {
       organizationId,
       mainImage,
       errors,
-      version
+      version,
     } = this.state;
-    const notice = submitting ? <Notice published={published} version={version} /> : '';
-    const imageArea = (mainImage && !previewShowing && version === 'v2') ? (
-      <MainImage mainImage={mainImage} onEdit={this.toggleImageManagement} />
+    const notice = submitting ? (
+      <Notice published={published} version={version} />
     ) : (
       ''
     );
+    const imageArea =
+      mainImage && !previewShowing && version === 'v2' ? (
+        <MainImage mainImage={mainImage} onEdit={this.toggleImageManagement} />
+      ) : (
+        ''
+      );
     const imageManagement = imageManagementShowing ? (
       <ImageManagement
         onExit={this.toggleImageManagement}
@@ -303,15 +338,16 @@ export default class ArticleForm extends Component {
     ) : (
       ''
     );
-    const orgArea = (organizations && organizations.length > 0) ? (
-      <OrgSettings
-        organizations={organizations}
-        organizationId={organizationId}
-        onToggle={this.handleOrgIdChange}
-      />
-    ) : (
-      ''
-    );
+    const orgArea =
+      organizations && organizations.length > 0 ? (
+        <OrgSettings
+          organizations={organizations}
+          organizationId={organizationId}
+          onToggle={this.handleOrgIdChange}
+        />
+      ) : (
+        ''
+      );
     const errorsArea = errors ? <Errors errorsList={errors} /> : '';
     let editorView = '';
     if (previewShowing) {
@@ -328,29 +364,39 @@ export default class ArticleForm extends Component {
         </div>
       );
     } else if (helpShowing) {
-      editorView = <BodyPreview previewResponse={{processed_html: helpHTML}} version="help" />;
+      editorView = (
+        <BodyPreview
+          previewResponse={{ processed_html: helpHTML }}
+          version="help"
+        />
+      );
     } else {
       let controls = '';
       let moreConfigBottomButton = '';
       if (version === 'v2') {
         moreConfigBottomButton = (
           <button
-            type='button'
+            type="button"
             className="articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom"
             onClick={this.toggleMoreConfig}
           >
-            <img src={ThreeDotsIcon} alt='menu dots' />
+            <img src={ThreeDotsIcon} alt="menu dots" />
           </button>
-        )
+        );
         controls = (
-          <div className={title.length > 128 ? 'articleform__titleTooLong' : ''}>
+          <div
+            className={title.length > 128 ? 'articleform__titleTooLong' : ''}
+          >
             <Title
               defaultValue={title}
               onKeyDown={this.handleTitleKeyDown}
               onChange={linkState(this, 'title')}
             />
             <div className="articleform__detailfields">
-              <Tags defaultValue={tagList} onInput={linkState(this, 'tagList')} />
+              <Tags
+                defaultValue={tagList}
+                onInput={linkState(this, 'tagList')}
+              />
               <button
                 className="articleform__detailsButton articleform__detailsButton--image"
                 onClick={this.toggleImageManagement}
@@ -367,7 +413,7 @@ export default class ArticleForm extends Component {
               </button>
             </div>
           </div>
-        )
+        );
       }
       editorView = (
         <div>
diff --git a/app/liquid_tags/gist_tag.rb b/app/liquid_tags/gist_tag.rb
index 531df9cd9..c52866261 100644
--- a/app/liquid_tags/gist_tag.rb
+++ b/app/liquid_tags/gist_tag.rb
@@ -15,17 +15,6 @@ class GistTag < LiquidTagBase
     )
   end
 
-  def self.special_script
-    <<~JAVASCRIPT
-      if (postscribe) {
-        var els = document.getElementsByClassName("ltag_gist-liquid-tag")
-        for (i = 0; i < els.length; i++) {
-            postscribe(els[i], els[i].firstElementChild.outerHTML);
-        }
-      }
-    JAVASCRIPT
-  end
-
   private
 
   def build_uri(link)
diff --git a/app/liquid_tags/runkit_tag.rb b/app/liquid_tags/runkit_tag.rb
index 49f63dff1..c0e2183c9 100644
--- a/app/liquid_tags/runkit_tag.rb
+++ b/app/liquid_tags/runkit_tag.rb
@@ -18,24 +18,6 @@ class RunkitTag < Liquid::Block
     )
   end
 
-  def self.special_script
-    <<~JAVASCRIPT
-      var targets = document.getElementsByClassName("runkit-element");
-      for (var i = 0; i < targets.length; i++) {
-        if (targets[i].children.length > 0) {
-          var preamble = targets[i].children[0].textContent;
-          var content = targets[i].children[1].textContent;
-          targets[i].innerHTML = "";
-          var notebook = RunKit.createNotebook({
-            element: targets[i],
-            source: content,
-            preamble: preamble
-          });
-        }
-      }
-    JAVASCRIPT
-  end
-
   def self.script
     <<~JAVASCRIPT
       var checkRunkit = setInterval(function() {
diff --git a/app/views/articles/_v2_form.html.erb b/app/views/articles/_v2_form.html.erb
index fc06382ef..744b5aff8 100644
--- a/app/views/articles/_v2_form.html.erb
+++ b/app/views/articles/_v2_form.html.erb
@@ -1,3 +1,5 @@
+<%= javascript_include_tag "https://embed.runkit.com", defer: true %>
+
 <div class="articleformcontainer">
   <div class="articleform"
        id="article-form"
diff --git a/package.json b/package.json
index 9f0e030b6..763678757 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "linkstate": "^1.1.1",
     "lodash.debounce": "4.0.8",
     "marked": "^0.7.0",
+    "postscribe": "^2.0.8",
     "preact": "^8.4.2",
     "preact-compat": "^3.19.0",
     "preact-textarea-autosize": "^4.0.7",
diff --git a/yarn.lock b/yarn.lock
index 78928587b..4facdf2a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9564,6 +9564,13 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.2, postcss@^7.0.5:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postscribe@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/postscribe/-/postscribe-2.0.8.tgz#5b7a53aad4b690b6c2f75818fcefe74490f410d5"
+  integrity sha1-W3pTqtS2kLbC91gY/O/nRJD0ENU=
+  dependencies:
+    prescribe ">=1.1.2"
+
 preact-compat@^3.19.0:
   version "3.19.0"
   resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.19.0.tgz#a71457b6a3bf051690a4411603bc2085aa061c2f"
@@ -9627,6 +9634,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prescribe@>=1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prescribe/-/prescribe-1.1.3.tgz#8d3122445f3fbaf4c4c5817ea527a17fc8139ee6"
+  integrity sha1-jTEiRF8/uvTExYF+pSehf8gTnuY=
+
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"