JSFiddle - React, Tailwind, and code Playground

jQuery Code-Snippet Box

by Jennifer Perrin

HTML

<h2>CSS Code:</h2>
 <pre class="snippet css">#selector { color:#000000; }
.another-selector { font-size:20px; border:1px solid #000000; padding:20px; }
tagname { width:100%; }</pre>

 <h2>HTML Code:</h2>
 <pre class="snippet html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
&lt;html>
  &lt;head>
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    &lt;title>An Example Web Page&lt;/title>
  &lt;/head>
  &lt;body>
    &lt;p>This is a basic web page&lt;/p>
  &lt;body>
&lt;html></pre>

CSS

body {
    margin:20px;
}
.snippet-container {
    width:630px;
    padding:10px 10px 30px;
    border:1px solid #999999;
    background-color:#e1e1e1;
    margin:10px auto;
    position:relative;
}
.snippet-container h2 {
    margin:0 0 10px;
    padding-left:10px;
    font-family:Georgia;
    font-weight:normal;
    font-style:italic;
}
.snippet {
    border:1px solid #999999;
    margin:0;
    position:relative;
}
.snippet ol {
    margin:0;
    padding-left:34px;
    background-color:#8dd397;
    color:#ffffff;
    font-weight:bold;
    font-style:italic;
}
.snippet ol li {
    padding-left:10px;
}
.snippet ol p {
    margin:0;
    color:#000000;
    font-weight:normal;
    font-style:normal;
    white-space:pre-wrap;
    padding:3px 0;
}
.snippet .stripe {
    background-color:#f5f5f5;
}
.snippet .unstripe {
    background-color:#ffffff;
}
.tools-container {
    position:absolute;
    right:10px;
}
.tool-list {
    margin:6px 0 0;
}
.tool-list li {
    list-style-type:none;
    float:left;
    font-weight:bold;
    font-size:13px;
}
.tool-list li a {
    text-decoration:none;
    font-family:Georgia;
    font-weight:normal;
    font-style:italic;
    font-size:11px;
    color:#000000;
    padding:0 5px;
    outline:1px dotted #e1e1e1;
}
.tool-list li a:hover {
    text-decoration:underline;
}
.snippet .display-box {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:#ffffff;
    display:none;
    white-space:pre-wrap;
}

JavaScript

$(function () {

    //process contents of snippets
    $("pre.snippet").each(function () {

        //get contents of <pre> and create list and container
        var currentItem = $(this),
            currentContents = currentItem.text(),
            contents = (currentItem.text().indexOf("\n") != -1) ? currentItem.text().split("\n") : currentItem.text().split("\r"),
            list = $("<ol>"),
            container = $("<div>").addClass("snippet-container").insertBefore(currentItem.prev());

        //remove original contents and wrap in container
        currentItem.text("").prev().andSelf().appendTo(container);

        //normalize height
        (currentItem.height() > 0) ? list.css("marginTop", -16) : null;

        //create list item
        $.each(contents, function (i, val) {

            //create list item and inner p
            var li = $("<li>").appendTo(list),
                p = $("<p>").text(val).appendTo(li);

            //add stripe class
            (i % 2 === 0) ? li.addClass("stripe") : li.addClass("unstripe");
        });

        list.appendTo(currentItem);

        //create tools
        var toolContainer = $("<div>").addClass("tools-container"),
            toolList = $("<ul>").addClass("tool-list").appendTo(toolContainer),
            listItem1 = $("<li>").addClass("tool-item").text("|").appendTo(toolList),
            listItem2 = $("<li>").addClass("tool-item").appendTo(toolList),
            plain = $("<a>").addClass("tool").attr({
                id: "plain",
                href: "#",
                title: "Show code as plain text"
            }).text("Show Plain").prependTo(listItem1).click(function (e) {

                //stop event
                e.preventDefault();

                //create container for plain code
                if ($(this).closest(".snippet-container").find(".snippet").children(".display-box").length === 0) {
                    var displayBox =...