Embed Theme Example

Embed-Theme-Example.markdown

Embed Theme Example

Forked from Chris Coyier's Pen Embed Theme Example.

A Pen by Marcy Sutton on CodePen.

License.

index.html

<div class="embed-nav group" id="embed-nav">
  <ul>
      <li>
        <a id="html-link" href="#html-box">
          HTML
        </a>
      </li>
      <li>
        <a id="css-link" href="#css-box">
          CSS
        </a>
      </li>
      <li>
        <a id="js-link" href="#js-box">
          JS
        </a>
      </li>
    <li>
      <a id="result-link" href="#result-box" class="active">
        Result
      </a>
    </li>
  </ul>

  <div class="logo-wrap" id="edit-area">
    <a target="_blank" href="<%= url_to_pen_view(@pen, 'pen') %>" title="Edit on CodePen">
      Edit
      <span class="on">on</span>[[[http://codepen.io/chriscoyier/pen/LfyGq]]]    
    </a>
  </div>

</div>

style.css

.cp-embed-logo {
  fill: #ccc;
}

.embed-nav {
  background: linear-gradient(#666, black);
}

/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/
#output pre {
  background-color: #263238;
}
hljs, #output code.cm-s-default {
  display: block;
  overflow-x: auto;
  padding: 0;
  background: #263238;
  color: white;
  font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  line-height: 1.45;
  tab-size: 2;
  -webkit-font-smoothing: auto;
  -webkit-text-size-adjust: none;
  position: relative;
  border-radius: 2px;
  margin: 0 0 1em;
}

#output .cm-tag,
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-keyword,
.hljs-literal,
.hljs-strong,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special {
  color: #e91e63;
}

hljs {
  color: #ddd;
}

hljs .hljs-constant,
.asciidoc .hljs-code,
.markdown .hljs-code {
	color: #66d9ef;
}

.hljs-code,
.hljs-class .hljs-title,
.hljs-header {
	color: white;
}

#output .cm-attribute,
.hljs-link_label,
.hljs-attribute,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-value,
.hljs-regexp {
  color: #9fa8da;
}

#output .cm-string,
.hljs-link_url,
.hljs-tag .hljs-value,
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-emphasis,
.hljs-type,
.hljs-preprocessor,
.hljs-pragma,
.ruby .hljs-class .hljs-parent,
.hljs-built_in,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.hljs-javadoc,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-name {
  color: #9ccc65;
}

#output .cm-comment,
.hljs-comment,
.hljs-annotation,
.smartquote,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
  color: #75715e;
}

.hljs-keyword,
.hljs-literal,
.css .hljs-id,
.hljs-phpdoc,
.hljs-dartdoc,
.hljs-title,
.hljs-header,
.hljs-type,
.vbscript .hljs-built_in,
.rsl .hljs-built_in,
.smalltalk .hljs-class,
.diff .hljs-header,
.hljs-chunk,
.hljs-winutils,
.bash .hljs-variable,
.apache .hljs-tag,
.tex .hljs-special,
.hljs-request,
.hljs-status {
  font-weight: bold;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
}