Another little widget I'll be using on my new site very soon :) I wanted a way of showing some code I write in a fancy way, this helped me achieve it!
Forked from Simon Goellner's Pen Sublime Editor.
A Pen by Lanorise Cainion on CodePen.
-
-
Save esironal/2171896c69f829432d8b to your computer and use it in GitHub Desktop.
Sublime Editor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="container"> | |
| <h1>The Sublime Editor basic window in CSS/HTML/JS</h1> | |
| <h2>You can maximise it too with the buttons, it's also responsive</h2> | |
| <div class="sublime"> | |
| <header class="sublime__title">Sublimey Text</header> | |
| <ul class="sublime-tabs"> | |
| <li class="sublime-tabs__tab"> | |
| <a href="#_github/index" class="sublime-tabs__link" data-type="html" data-project="index">index.html</a> | |
| </li> | |
| <li class="sublime-tabs__tab"> | |
| <a href="#_github/mainjs" class="sublime-tabs__link" data-type="js" data-project="mainjs">main.js</a> | |
| </li> | |
| <li class="sublime-tabs__tab"> | |
| <a href="#_github/maincss" class="sublime-tabs__link" data-type="css" data-project="maincss">main.css</a> | |
| </li> | |
| <li class="sublime-tabs__tab sublime-tabs__tab--soon"> | |
| <a href="#" class="sublime-tabs__link" data-type="canvas" data-project="">sublime.css</a> | |
| </li> | |
| </ul> | |
| <button class="sublime__button sublime__button--full js-sublime-maximise" tabindex="-1">go fullscreen</button> | |
| <button class="sublime__button sublime__button--maxi js-sublime-toggle" tabindex="-1">maximise</button> | |
| <button class="sublime__button sublime__button--exit js-sublime-minimise" tabindex="-1">exit</button> | |
| <div class="sublime-project" data-project-name="index"> | |
| <h4 class="sublime-project__title">HTML Example</h4> | |
| <pre class="sublime-project__code prettyprint lang-html linenums"> | |
| <ul> | |
| <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> | |
| <li>Aliquam tincidunt mauris eu risus.</li> | |
| <li>Vestibulum auctor dapibus neque.</li> | |
| </ul> | |
| </pre> | |
| </div> | |
| <div class="sublime-project" data-project-name="mainjs"> | |
| <h4 class="sublime-project__title">Javascript File</h4> | |
| <pre class="sublime-project__code prettyprint lang-js linenums"> | |
| function Class(){ | |
| this.method = function(){alert('simple method')}; | |
| } | |
| // some random JS | |
| var object = new Class(); | |
| object.method(); | |
| </pre> | |
| </div> | |
| <div class="sublime-project" data-project-name="maincss"> | |
| <h4 class="sublime-project__title">CSS File</h4> | |
| <pre class="sublime-project__code prettyprint lang-css linenums"> | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| width: 100%; | |
| font-family: "Source Code Pro", Consolas, "Courier New", monospace; | |
| font-size: 1em; | |
| font-weight: 400; | |
| z-index: 40; | |
| background: | |
| linear-gradient( | |
| to top , | |
| rgba(255,255,255,0.8), | |
| rgba(255,255,255,0.6) | |
| ); | |
| box-shadow: | |
| inset 0 -1px 1px rgba(255,255,255,1), | |
| inset 0 -3px 3px rgba(255,255,255,0.7), | |
| 0 0 20px rgba(0,0,0,0.2); | |
| </pre> | |
| </div> | |
| <footer class="sublime__footer">HTML</footer> | |
| </div> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| var app = app || {}; | |
| app.sublime = function() { | |
| var activeClass = "active", | |
| $sublime = $(".sublime"), | |
| $tabs = $(".sublime-tabs__tab"), | |
| $links = $(".sublime-tabs__link"), | |
| $projects = $(".sublime-project"), | |
| $footer = $(".sublime__footer"), | |
| $title = $(".sublime__title"), | |
| titleText = $title.text(), | |
| $maxi = $(".js-sublime-maximise"), | |
| $togg = $(".js-sublime-toggle"), | |
| $mini = $(".js-sublime-minimise"); | |
| $maxi.add( $togg ).on("click", function() { | |
| $sublime.css({ | |
| "-webkit-transition-duration":"0", | |
| "-moz-transition-duration":"0", | |
| "-ms-transition-duration":"0", | |
| "transition-duration":"0", | |
| "opacity":"0", | |
| "left": "10em", | |
| "right": "10em", | |
| "top": "10em", | |
| "bottom": "10em" | |
| }); | |
| $sublime.toggleClass("sublime--fullscreen"); | |
| setTimeout(function() { | |
| $sublime.css({ | |
| "-webkit-transition-duration":"", | |
| "-moz-transition-duration":"", | |
| "-ms-transition-duration":"", | |
| "transition-duration":"", | |
| "opacity":"", | |
| "left": "", | |
| "right": "", | |
| "top": "", | |
| "bottom": "" | |
| }); | |
| },10); | |
| }); | |
| $mini.on("click", function() { | |
| $sublime.removeClass("sublime--fullscreen"); | |
| }); | |
| $(window).on("sublimetab", function(e,href) { | |
| console.log(href); | |
| var $link = $links.filter("[href=" +href.replace("/","\\/")+ "]"), | |
| $tab = $link.closest(".sublime-tabs__tab"); | |
| $tab.trigger("activateTab",href); | |
| }); | |
| $tabs.on("activateTab", function(e,href) { | |
| href = href.split("/"); | |
| var $tab = $(this), | |
| $project = $projects.filter("[data-project-name="+ href[href.length-1] +"]"); | |
| // reverse the z-order | |
| $tabs | |
| .each( function(k,v) { | |
| $(v).css("z-index", $tabs.length - k); | |
| }) | |
| .removeClass( activeClass ); | |
| $tab | |
| .addClass( activeClass ) | |
| .css("z-index", $tabs.length + 1 ); | |
| $projects.removeClass( activeClass ); | |
| $project.addClass( activeClass ); | |
| $title.text( $tab.children(".sublime-tabs__link").text() + " - " + titleText); | |
| $footer.text( $tab.children(".sublime-tabs__link").data("type") ); | |
| }); | |
| $tabs | |
| .first() | |
| .trigger("activateTab", $links.first().attr("href") ); | |
| $tabs.on("click",function(e){ | |
| if( $(this).find(".sublime-tabs__link").attr("href") !== "#" ) { | |
| $(window).trigger("sublimetab", $(this).find(".sublime-tabs__link").attr("href") ); | |
| } | |
| }); | |
| }; | |
| app.prettify = function() { | |
| window.prettyPrint(); | |
| }; | |
| app.sublime(); | |
| app.prettify(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700); | |
| $bodyColor: #444; | |
| $preBlue: #2aa1ec; | |
| $preYellow: #f0e68c; | |
| $prePink: #ffa0a0; | |
| $preGreen: #98fb98; | |
| $preWhite: #eee; | |
| body,html { | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body { | |
| background: url(http://omoihouse.com/wp-content/uploads/2013/10/wg_blurred_backgrounds_9.jpg); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| color: $bodyColor; | |
| } | |
| .container { | |
| padding: 20px 10%; | |
| } | |
| h1, | |
| h2{ | |
| font-family: "Ubuntu"; | |
| margin: 0.5em 0 0.1em 0; | |
| } | |
| h2 { | |
| margin-top: 0.1em; | |
| margin-bottom: 2em; | |
| } | |
| $serif: "Merriweather", serif; | |
| $sans: "Lato", "Helvetica", "Segoe", sans-serif; | |
| $code: "Source Code Pro", "Consolas", monospace; | |
| .sublime { | |
| min-height: 270px; | |
| min-width: 200px; | |
| max-width: 1000px; | |
| position: relative; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: #303030; | |
| background-image: | |
| url(http://files.simey.me/sublime/sublime-bg-icons.png), | |
| url(http://files.simey.me/sublime/sublime-bg-expand.png), | |
| url(http://files.simey.me/sublime/sublime-bg-top.png), | |
| url(http://files.simey.me/sublime/sublime-bg-bottom.png); | |
| background-repeat: no-repeat, no-repeat, repeat-x, repeat-x; | |
| background-position: top left, top right, top center, bottom center; | |
| border-radius: 4px; | |
| box-shadow: 0 10px 50px rgba(0,0,0,0.6); | |
| text-shadow: none; | |
| &--fullscreen { | |
| position: fixed; | |
| left: 2em; | |
| right: 2em; | |
| top: 2em; | |
| bottom: 2em; | |
| margin: 0; | |
| width: auto; | |
| height: auto; | |
| max-width: none; | |
| min-width: none; | |
| max-height: none; | |
| min-height: none; | |
| z-index: 50; | |
| transition: all 0.6s ease; | |
| .sublime-project { | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| left: 0; | |
| right: 0; | |
| top: 60px; | |
| bottom: 25px; | |
| overflow: auto; | |
| } | |
| } | |
| &__button { | |
| text-indent: -9999em; | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| position: absolute; | |
| width: 24px; | |
| height: 22px; | |
| border-radius: 10px; | |
| top: 0; | |
| left: 2px; | |
| &--full { | |
| left: auto; | |
| right: 0; | |
| } | |
| &--maxi { | |
| left: 42px; | |
| } | |
| } | |
| &__title, | |
| &__footer { | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-align: center; | |
| height: 22px; | |
| line-height: 22px; | |
| } | |
| &__title { | |
| color: #333; | |
| text-shadow: 0 1px 1px white; | |
| } | |
| &__footer { | |
| color: #ccc; | |
| font-weight: 300; | |
| text-align: right; | |
| position: absolute; | |
| bottom: 1px; | |
| right: 20px; | |
| width: 150px; | |
| } | |
| } | |
| .sublime-tabs { | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| background: url(http://files.simey.me/sublime/sublime-tabs-bg.png); | |
| overflow: hidden; | |
| &__tab { | |
| position: relative; | |
| display: inline-block; | |
| height: 29px; | |
| line-height: 23px; | |
| margin: 6px 0 0 20px; | |
| z-index: 1; | |
| padding-right: 20px; | |
| background: url(http://files.simey.me/sublime/sublime-tab-x-dark.png); | |
| background-repeat: repeat-x; | |
| &:before, | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| height: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| &:before { | |
| width: 20px; | |
| left: -20px; | |
| background: url(http://files.simey.me/sublime/sublime-tab-l-dark.png); | |
| } | |
| &:after { | |
| width: 20px; | |
| right: -20px; | |
| background: url(http://files.simey.me/sublime/sublime-tab-r-dark.png); | |
| } | |
| &.active { | |
| z-index: 2; | |
| background: url(http://files.simey.me/sublime/sublime-tab-x.png); | |
| &:before { | |
| background: url(http://files.simey.me/sublime/sublime-tab-l.png); | |
| } | |
| &:after { | |
| background: url(http://files.simey.me/sublime/sublime-tab-r.png); | |
| } | |
| } | |
| } | |
| &__link, | |
| &__link:visited { | |
| font-size: 12px; | |
| color: #ddd; | |
| text-decoration: none; | |
| display: inline-block; | |
| position: relative; | |
| line-height: 20px; | |
| &:hover { | |
| color: white; | |
| } | |
| } | |
| } | |
| .sublime-tabs__tab { | |
| &--soon { | |
| opacity: 0.8; | |
| .sublime-tabs__link { | |
| padding-right: 1.2em; | |
| color: #999; | |
| &:after { | |
| content: "\25cf"; | |
| height: 1em; | |
| line-height: 1em; | |
| position: absolute; | |
| right: -20px; | |
| top: 50%; | |
| margin-top: -0.5em; | |
| } | |
| } | |
| @media screen and ( max-width: 500px ) { | |
| display: none; | |
| } | |
| } | |
| } | |
| .sublime-project { | |
| font-family: $code; | |
| padding: 15px 10px 25px; | |
| display: none; | |
| &__title { | |
| font-size: 1.3em; | |
| font-weight: 900; | |
| margin: 0 0 0 40px; | |
| color: #eee; | |
| } | |
| &__code { | |
| background: transparent!important; | |
| padding: 0.5em 0 2em 0em; | |
| &--indent { | |
| padding: 0.5em 0 2em 1.8em; | |
| } | |
| } | |
| &.active { | |
| display: block; | |
| } | |
| } | |
| /* desert scheme ported from vim to google prettify */ | |
| pre.prettyprint { display: block; background-color: #333 } | |
| pre .nocode { background-color: none; color: #000 } | |
| pre .str { color: #ffa0a0 } /* string - pink */ | |
| pre .kwd { color: #f0e68c; font-weight: bold } | |
| pre .com { color: #87ceeb } /* comment - skyblue */ | |
| pre .typ { color: #98fb98 } /* type - lightgreen */ | |
| pre .lit { color: #cd5c5c } /* literal - darkred */ | |
| pre .pun { color: #fff } /* punctuation */ | |
| pre .pln { color: #fff } /* plaintext */ | |
| pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */ | |
| pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */ | |
| pre .atv { color: #ffa0a0 } /* attribute value - pink */ | |
| pre .dec { color: #98fb98 } /* decimal - lightgreen */ | |
| /* Specify class=linenums on a pre to get line numbering */ | |
| ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */ | |
| li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } | |
| /* Alternate shading for lines */ | |
| li.L1,li.L3,li.L5,li.L7,li.L9 { } | |
| pre, code { | |
| font-family: "Source Code Pro", "Consolas", "Courier New", monospace; | |
| } | |
| pre { | |
| font-size: 12px; | |
| background: #303030; | |
| } | |
| li.L0, | |
| li.L1, | |
| li.L2, | |
| li.L3, | |
| li.L5, | |
| li.L6, | |
| li.L7, | |
| li.L8 { | |
| list-style-type: decimal; | |
| } | |
| pre .yellow * { color: $preYellow!important; } | |
| pre .white * { color: $preWhite!important; } | |
| pre .green * { color: $preGreen!important; } | |
| pre .blue * { color: $preBlue!important; } | |
| pre .pink * { color: $prePink!important; } | |
| pre img { | |
| vertical-align: top; | |
| margin: 1.5em 0; | |
| border-radius: 3px; | |
| } | |
| pre .copy-to-clipboard { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment