diff --git a/static/js/rendered_markdown.js b/static/js/rendered_markdown.js
index aa48a83a9f..40a70b7679 100644
--- a/static/js/rendered_markdown.js
+++ b/static/js/rendered_markdown.js
@@ -4,8 +4,10 @@ const ClipboardJS = require("clipboard");
 const moment = require("moment");
 
 const copy_code_button = require("../templates/copy_code_button.hbs");
+const view_code_in_playground = require("../templates/view_code_in_playground.hbs");
 
 const people = require("./people");
+const settings_config = require("./settings_config");
 
 /*
     rendered_markdown
@@ -189,10 +191,34 @@ exports.update_elements = (content) => {
         $(this).prepend(toggle_button_html);
     });
 
-    // Display the copy-to-clipboard button inside the div.codehilite element.
+    // Display the view-code-in-playground and the copy-to-clipboard button inside the div.codehilite element.
     content.find("div.codehilite").each(function () {
+        const $codehilite = $(this);
+        const $pre = $codehilite.find("pre");
+        const fenced_code_lang = $codehilite.data("code-language");
+        if (fenced_code_lang !== undefined) {
+            const playground_info = settings_config.get_playground_info_for_languages(
+                fenced_code_lang,
+            );
+            if (playground_info !== undefined) {
+                // If a playground is configured for this language,
+                // offer to view the code in that playground.  When
+                // there are multiple playgrounds, we display a
+                // popover listing the options.
+                let title = i18n.t("View in playground");
+                const view_in_playground_button = $(view_code_in_playground());
+                $pre.prepend(view_in_playground_button);
+                if (playground_info.length === 1) {
+                    title = i18n.t(`View in ${playground_info[0].name}`);
+                } else {
+                    view_in_playground_button.attr("aria-haspopup", "true");
+                }
+                view_in_playground_button.attr("title", title);
+                view_in_playground_button.attr("aria-label", title);
+            }
+        }
         const copy_button = $(copy_code_button());
-        $(this).find("pre").prepend(copy_button);
+        $pre.prepend(copy_button);
         new ClipboardJS(copy_button[0], {
             text(copy_element) {
                 return $(copy_element).siblings("code").text();
diff --git a/static/templates/view_code_in_playground.hbs b/static/templates/view_code_in_playground.hbs
new file mode 100644
index 0000000000..1143670760
--- /dev/null
+++ b/static/templates/view_code_in_playground.hbs
@@ -0,0 +1,2 @@
+{{! Display the "view code in playground" option for code blocks}}
+<a target="_blank" rel="noopener noreferrer" class="code_external_link" data-toggle="tooltip"><i class="fa fa-external-link"></i></a>