"editor"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: