<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/andrewarchi/pen/qdBVrM?limit=all&page=23&q=code" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:500);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
.container {
margin: 0 5%;
}
body {
font-family: sans-serif;
}
.codetabs-header > ul:before, .codetabs-header > ul:after {
content: " ";
display: table;
}
.codetabs-header > ul:after {
clear: both;
}
.codetabs-header > ul {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.codetabs-header > ul > li {
display: block;
float: left;
}
.codetabs-header > ul > li > a {
display: block;
padding: 6px 16px;
color: #fff;
text-decoration: none;
position: relative;
}
.codetabs-header > ul > li > a:hover, .codetabs-header > ul > li > a:focus {
background-color: #4a4a4a;
}
.codetabs-header > ul > li.active > a, .codetabs-header > ul > li.active > a:hover, .codetabs-header > ul > li.active > a:focus {
cursor: default;
background-color: #303030;
}
.codetabs-header > ul > li.active > a:before, .codetabs-header > ul > li.active > a:hover:before, .codetabs-header > ul > li.active > a:focus:before {
content: "";
bottom: -5px;
left: calc(50% - 6px);
position: absolute;
display: block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #303030;
}
.codetabs-header > ul > li.codebox-html.active > a, .codetabs-header > ul > li.codebox-html.active > a:hover, .codetabs-header > ul > li.codebox-html.active > a:focus {
background-color: #e44d26;
}
.codetabs-header > ul > li.codebox-html.active > a:before, .codetabs-header > ul > li.codebox-html.active > a:hover:before, .codetabs-header > ul > li.codebox-html.active > a:focus:before {
border-top-color: #e44d26;
}
.codetabs-header > ul > li.codebox-css.active > a, .codetabs-header > ul > li.codebox-css.active > a:hover, .codetabs-header > ul > li.codebox-css.active > a:focus {
background-color: #0270ba;
}
.codetabs-header > ul > li.codebox-css.active > a:before, .codetabs-header > ul > li.codebox-css.active > a:hover:before, .codetabs-header > ul > li.codebox-css.active > a:focus:before {
border-top-color: #0270ba;
}
.codetabs-header > ul > li.codebox-javascript.active > a, .codetabs-header > ul > li.codebox-javascript.active > a:hover, .codetabs-header > ul > li.codebox-javascript.active > a:focus {
background-color: #f7df1e;
}
.codetabs-header > ul > li.codebox-javascript.active > a:before, .codetabs-header > ul > li.codebox-javascript.active > a:hover:before, .codetabs-header > ul > li.codebox-javascript.active > a:focus:before {
border-top-color: #f7df1e;
}
.codetabs-header > ul > li.codebox-php.active > a, .codetabs-header > ul > li.codebox-php.active > a:hover, .codetabs-header > ul > li.codebox-php.active > a:focus {
background-color: #6082bb;
}
.codetabs-header > ul > li.codebox-php.active > a:before, .codetabs-header > ul > li.codebox-php.active > a:hover:before, .codetabs-header > ul > li.codebox-php.active > a:focus:before {
border-top-color: #6082bb;
}
.codetabs-header > ul > li.codebox-java.active > a, .codetabs-header > ul > li.codebox-java.active > a:hover, .codetabs-header > ul > li.codebox-java.active > a:focus {
background-color: #f89820;
}
.codetabs-header > ul > li.codebox-java.active > a:before, .codetabs-header > ul > li.codebox-java.active > a:hover:before, .codetabs-header > ul > li.codebox-java.active > a:focus:before {
border-top-color: #f89820;
}
.codetabs-header > ul > li.codebox-csharp.active > a, .codetabs-header > ul > li.codebox-csharp.active > a:hover, .codetabs-header > ul > li.codebox-csharp.active > a:focus {
background-color: #68217a;
}
.codetabs-header > ul > li.codebox-csharp.active > a:before, .codetabs-header > ul > li.codebox-csharp.active > a:hover:before, .codetabs-header > ul > li.codebox-csharp.active > a:focus:before {
border-top-color: #68217a;
}
.codebox {
margin-bottom: 16px;
}
.codebox-header, .codetabs-header {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #fff;
background: #575757;
}
.codebox-header {
padding: 6px 16px;
}
.codebox-header.codebox-html {
background-color: #e44d26;
}
.codebox-header.codebox-css {
background-color: #0270ba;
}
.codebox-header.codebox-javascript {
background-color: #f7df1e;
}
.codebox-header.codebox-php {
background-color: #6082bb;
}
.codebox-header.codebox-java {
background-color: #f89820;
}
.codebox-header.codebox-csharp {
background-color: #68217a;
}
.codebox-content {
padding: 16px;
font-family: Inconsolata, monospaced;
font-size: 14px;
color: #fff;
background-color: #3d3d3d;
}
.codebox-content pre {
margin: 0;
}
.codebox-content .codetab-content {
display: none;
}
.codebox-content .codetab-content.active {
display: block;
}
/*
Railscasts-like style (c) Visoft, Inc. (Damien White)
*/
/*.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #232323;
color: #e6e1dc;
-webkit-text-size-adjust: none;
}*/
.hljs-comment,
.hljs-javadoc,
.hljs-shebang {
color: #bc9458;
font-style: italic;
}
.hljs-keyword,
.ruby .hljs-function .hljs-keyword,
.hljs-request,
.hljs-status,
.nginx .hljs-title,
.method,
.hljs-list .hljs-title {
color: #c26230;
}
.hljs-string,
.hljs-number,
.hljs-regexp,
.hljs-tag .hljs-value,
.hljs-cdata,
.hljs-filter .hljs-argument,
.hljs-attr_selector,
.apache .hljs-cbracket,
.hljs-date,
.tex .hljs-command,
.asciidoc .hljs-link_label,
.markdown .hljs-link_label {
color: #a5c261;
}
.hljs-subst {
color: #519f50;
}
.hljs-tag,
.hljs-tag .hljs-keyword,
.hljs-tag .hljs-title,
.hljs-doctype,
.hljs-sub .hljs-identifier,
.hljs-pi,
.input_number {
color: #e8bf6a;
}
.hljs-identifier {
color: #d0d0ff;
}
.hljs-class .hljs-title,
.hljs-type,
.smalltalk .hljs-class,
.hljs-javadoctag,
.hljs-yardoctag,
.hljs-phpdoc,
.hljs-dartdoc {
text-decoration: none;
}
.hljs-constant,
.hljs-name {
color: #da4939;
}
.hljs-symbol,
.hljs-built_in,
.ruby .hljs-symbol .hljs-string,
.ruby .hljs-symbol .hljs-identifier,
.asciidoc .hljs-link_url,
.markdown .hljs-link_url,
.hljs-attribute {
color: #6d9cbe;
}
.asciidoc .hljs-link_url,
.markdown .hljs-link_url {
text-decoration: underline;
}
.hljs-params,
.hljs-variable,
.clojure .hljs-attribute {
color: #d0d0ff;
}
.css .hljs-tag,
.hljs-rule .hljs-property,
.hljs-pseudo,
.tex .hljs-special {
color: #cda869;
}
.css .hljs-class {
color: #9b703f;
}
.hljs-rule .hljs-keyword {
color: #c5af75;
}
.hljs-rule .hljs-value {
color: #cf6a4c;
}
.css .hljs-id {
color: #8b98ab;
}
.hljs-annotation,
.apache .hljs-sqbracket,
.nginx .hljs-built_in {
color: #9b859d;
}
.hljs-preprocessor,
.hljs-preprocessor *,
.hljs-pragma {
color: #8996a8 !important;
}
.hljs-hexcolor,
.css .hljs-value .hljs-number {
color: #a5c261;
}
.hljs-title,
.hljs-decorator,
.css .hljs-function {
color: #ffc66d;
}
.diff .hljs-header,
.hljs-chunk {
background-color: #2f33ab;
color: #e6e1dc;
display: inline-block;
width: 100%;
}
.diff .hljs-change {
background-color: #4a410d;
color: #f8f8f8;
display: inline-block;
width: 100%;
}
.hljs-addition {
background-color: #144212;
color: #e6e1dc;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
color: #e6e1dc;
display: inline-block;
width: 100%;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.7;
}
</style></head><body>
<div ng-app="app" ng-controller="CodeCtrl" class="container">
<h1>Source Code Boxes Using Angular</h1>
<h2>Tabbed Code Boxes</h2>
<codetabs>
<codetab ng-repeat="item in code" title="{{item.title}}" language="{{item.language}}" source="item.source"></codetab>
</codetabs>
<h2>Seperate Code Boxes</h2>
<codebox ng-repeat="item in code | limitTo: 3" title="{{item.title}}" language="{{item.language}}" source="item.source"></codebox>
<h2>Custom Named Code Tabs</h2>
<codetabs>
<codetab ng-repeat="item in code | limitTo: 3" title="Tab {{$index + 1}}" language="{{item.language}}" source="item.source"></codetab>
</codetabs>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/highlight.pack.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/angular-highlightjs.min.js'></script>
<script >angular.module('app', ['hljs'])
.controller('CodeCtrl', ['$scope', function($scope) {
$scope.code = [
{ language: 'html', source: '<p>Hello World!</p>' },
{ language: 'css', source: 'p:after { content: "Hello World"; }' },
{ title: 'JS', language: 'javascript', source: 'alert(\'Hello World!\');' },
{ language: 'php', source: '<!--?php echo="Hello World!" ?-->' },
{ language: 'java', source: 'System.out.println("Hello World!");' },
{ title: 'C#', language: 'csharp', source: 'Console.WriteLine("Hello World!");' },
];
}])
.directive('codebox', function() {
return {
restrict: 'EA',
replace: true,
template:
'<div class="codebox">' +
' <div class="codebox-header codebox-{{language | lowercase}}">{{title || (language | uppercase)}}</div>' +
' <div class="codebox-content">' +
' <hljs language="{{language | lowercase}}" source="source"><ng-transclude></ng-transclude></hljs>' +
' </div>' +
'</div>',
scope: {
title: '@',
language: '@',
source: '='
}
};
})
//http://jsfiddle.net/Wijmo/ywUYQ/
.directive('codetabs', function() {
return {
restrict: 'EA',
transclude: true,
scope: {},
controller: ['$scope', function($scope) {
var tabs = $scope.tabs = [];
$scope.select = function(tab) {
angular.forEach(tabs, function(tab) {
tab.selected = false;
});
tab.selected = true;
}
this.addPane = function(tab) {
if (tabs.length == 0) { $scope.select(tab); }
tabs.push(tab);
}
}],
template:
'<div class="codebox">' +
' <div class="codetabs-header">' +
' <ul>' +
' <li ng-repeat="tab in tabs" ng-class="{active: tab.selected}" class="codebox-{{tab.language | lowercase}}">'+
' <a href="" ng-click="select(tab)">{{tab.title || (tab.language | uppercase)}}</a>' +
' </li>' +
' </ul>' +
' </div>' +
' <div class="codebox-content" ng-transclude></div>' +
'</div>',
replace: true
};
}).
directive('codetab', function() {
return {
require: '^codetabs',
restrict: 'EA',
transclude: true,
scope: {
title: '@',
language: '@',
source: '='
},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
//'<div class="codetab-content" ng-class="{active: selected}" ng-transclude></div>',
'<div class="codetab-content" ng-class="{active: selected}">' +
//' <pre><code data-language="{{language | lowercase}}">{{source}}</code></pre>' +
' <hljs language="{{language | lowercase}}" source="source"><ng-transclude></ng-transclude></hljs>' +
'</div>',
replace: true
};
})
//# sourceURL=pen.js
</script>
</body></html>
