Displaying Code with CSS - Sass-Edition

displaying-code-with-css-sass-edition.markdown

Displaying Code with CSS - Sass-Edition

Forked from: http://codepen.io/rhizovuns/pen/yqcmk and converted to Sass

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<pre data-codetype="HTML"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Sample Page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>

<pre data-codetype="CSS"><code>#header-wrapper {
  background:#333;
  color:white;
  border-bottom:10px solid #ccc;
  text-align:left;
  transition:all .5s ease-out;
  padding:8px 0 18px;
}

#header {
  margin:0 15px;
}

#header-logo {
  position:relative;
  width:84px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}  
</code></pre>

<pre data-codetype="JavaScript"><code>(function() {
    var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(',');
    for (var i = 0; i &lt; html5.length; i++) {
        document.createElement(html5[i]);
    }
    try {
        document.execCommand('BackgroundImageCache', false, true);
    } catch(e) {}
})();</code></pre>

<pre data-codetype="JQuery"><code>function generate() {
    var a = $('#container').html();
    var b = window.open('','','width=600,height=400');
        b.document.write('&lt;textarea&gt;' + a + '&lt;/textarea&gt;');
}</code></pre>

<pre data-codetype="PHP"><code>&lt;?php

header('Content-type: application/json; charset: utf-'.'8');
// header('Cache-Control: must-revalidate');

$url = 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&amp;nojsoncallback=1';

if (!empty($_REQUEST['tags'])) {
    $url .= '&amp;tags=' . urlencode($_REQUEST['tags']);
}

echo file_get_contents($url);

?&gt;</code></pre>

<pre data-codetype="XML"><code>&lt;b:if cond='data:title != &amp;quot;DTE :]&amp;quot;'&gt;
    &lt;h2 class='title'&gt;
        &lt;data:title/&gt;
    &lt;/h2&gt;
&lt;/b:if&gt;</code></pre>

style.scss

// Fonts
$fz: 20px;
$lh: 1.25;
$fz-title: 22px;
$lh-title: 1.75;
$ff-title: Arial, sans-serif;

// Colors
$col-standard: #333;
$bg-standard:  #666;
$bd-standard:  2px solid $bg-standard;


$col-codetype: (HTML #0B7E88 #08464B) (CSS #B71C1C #B71C1C) (JavaScript #545448 #1F2E24) (JQuery #395540 #2E2E27) (PHP #FF9900 #865003) (XML #FF0C39 #790015);

code {
  font-family: Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  font-size: $fz;
  line-height: $lh;
  font-weight: bold;
}

pre {
    overflow:auto;
    word-wrap:normal;
    white-space:pre;

    background-color: #fff;
    background-image: linear-gradient(to bottom, #f5f5f5 50%, white 50%);
    background-size: $fz*$lh*2 $fz*$lh*2;
    background-repeat:repeat;

  /* Standard colors */
    color: $col-standard;
    border: $bd-standard;

    position:relative;
    padding:0 10px;
    margin: 10px 0;
}

pre[data-codetype] {
    padding: $fz*$lh*2 1em 1em 1em;
}

pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color: $bg-standard;
    padding: 3px 10px;
    font-size:   $fz-title;
    line-height: $lh-title;
    font-family: $ff-title;
    font-weight: bold;
    color:white;
}

// color-map is on the top
@each $color in $col-codetype {
	$type: 	nth($color, 1);
	$c1: 	  nth($color, 2);
	$c2: 	  nth($color, 3);
	pre[data-codetype="#{$type}"] {
		border-color: $c1;
		color: $c2;
		&:before {
		  background-color: $c1;
		}
	}
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/styling-basics_2.css" rel="stylesheet" />