syntax-highlighting

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Syntax highlighting</title> <link href="../assets/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> <link href="../assets/css/app.css" media="screen, projection" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width"> <meta name="author" content="Bram de Haan"> <meta name="robots" content="index, follow"> <meta name="description" content="Colection of colorschemes for Code Syntax highlighting"/> <link rel="author" href="https://plus.google.com/111567145811003203990/posts"> <style>del { text-decoration: strike-through; }</style> </head> <body> <header id="header" class="row header"> <div class="large-4 columns"> <h1 class="repo-title"><a href="http://atelierbram.github.io/syntax-highlighting/">Syntax Highlighting <span class="tagline sh-small">colorschemes</span></a></h1> </div> <nav class="large-8 columns "> <ul class="inline-list right"> <li><a href="http://atelierbram.github.io/syntax-highlighting/prism">Prism</a> <li><a href="../duotones">Duotones</a></li> <li><a href="../atelier-schemes/" data-dropdown="drop-atelierschemes" class="button dropdown dropdown-atelier">Atelier Schemes<span data-dropdown="drop-atelierschemes"></span></a><br> <ul id="drop-atelierschemes" class="f-dropdown small" data-dropdown-content> <li><a href="../atelier-schemes/">index - overview</a></li> <li><a href="../atelier-schemes/forest/">Forest</a></li> <li><a href="../atelier-schemes/heath">Heath</a></li> <li><a href="../atelier-schemes/sulpherpool">Sulpherpool</a></li> <li><a href="../atelier-schemes/lakeside/">Lakeside</a></li> <li><a href="../atelier-schemes/seaside/">Seaside</a></li> <li><a href="../output">Output</a></li> </ul> </li> </ul> </nav> </header> <div class="row outer-wrap"> <article class="article article--demo"> <div class="inner-wrap"> <h2 class="project-title">Chrome Devtools <small>colorschemes</small></h2> <p><del>One can change the way Chrome Developer Tools looks by having a custom CSS stylesheet, named <code>Custom.css</code>. The path for the directory that contains the file:</del></p> <pre><code> <del>Mac: "Library/Application Support/Google/Chrome/Default/User StyleSheets/" Linux: "~/.config/chrome/Default/User StyleSheets/" Windows: "C:\Users\**Your username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\"</del> </code></pre> <p>Method above will not work anymore.</p> <p>To make Solarized Light Theme work in <a href="https://www.google.com/intl/nl/chrome/browser/canary.html">Crome Canary</a>, follow the instructions on:</p> <ul> <li><a href="http://stackoverflow.com/questions/21207474/custom-css-stop-to-work-in-32-0-1700-76-m-google-chrome-update">Official method (Chrome 33+ only) taken from stackoverflow</a></li> <li><a href="https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme">ZeroDarkMatrix Theme for Chrome</a></li> </ul> <p><a href="zero-base-themes/canary-theme-extension/styles.css">You can download the stylesheet</a>, but better (edit and) regenerate the <a href="zero-base-themes/themes/solarized-light.less">.less file</a>, which is build on top of <a href="https://github.com/mauricecruz/zero-base-themes">Zero Base Themes</a></p> <p>For tweaking the theme you can use DevTools itself to inspect Devtools: </p> <ol> <li> undock DevTools </li> <li> then hit Ctrl-Alt-i or Cmd+alt+i on Mac </li> <li> now you have yet another undocked DevTools window with all the DevTools markup to inspect the DevTools-window you undocked in step 1 … </li> </ol> <h3 id="solarized-light">Solarized Light</h3> <p>Solarized Light is a syntax highlighting colorscheme, made by <a href="http://ethanschoonover.com/">Ethan Schoonover</a>. It is well balanced, and thoroughly tested, and comes in two varieties: a dark, or a light background. </p> <p>For <a href="http://atelierbram.github.io/syntax-highlighting/chrome-devtools/css/Custom.css">this Chrome-DevTools colorscheme</a> the light background-color variety was the starting point. In a few places the dark background give some extra contrast.</p> <figure class="sh-fig sh-screenshot"> <img src="https://lh3.googleusercontent.com/-RBaou2IeYOw/Ug6SDCxgI0I/AAAAAAAAAlQ/0yR4Ugm2gGM/s800/screenshot_chrome-devtools_solarized-light_640x480.png" alt="screenshot Chrome DevTools with solarized-light colorscheme" class="sh-img" > <figcaption class="fig-cap"> <pre>Screenshot of Chrome DevTools (undocked), themed with Solarized-Light</pre> </figcaption> </figure> <p><a href="http://atelierbram.github.io/syntax-highlighting/chrome-devtools/zero-base-themes/canary-theme-extension/styles.css" class="sh-button">download</a></p> <h3 id="external-links">External Links</h3> <ul> <li><a href="http://darcyclarke.me/design/skin-your-chrome-inspector/">Skin your Chrome Inspector, by Darcy Clarke</a></li> <li><a href="https://plus.google.com/+AddyOsmani/posts/UZF34wPJXsL">Tips and links by Addy Osmani</a></li> <li><a href="http://devthemez.com/themes/chrome-developer-tools">more Themes for Chrome Developer Tools</a></li> <li><a href="http://ethanschoonover.com/solarized">Solarized project page</a></li> <li><a href="https://github.com/altercation/solarized">Solarized on Github</a></li> </ul> <p><a href="#header" class="go-to-top sh-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> <g id="outline-black"> <path opacity="0.5" d="M25,3L3,34l12-1v13h20V33l12,1L25,3z"/> </g> <g id="inner-white"> <polygon fill="#FFFFFF" points="42,31 25,7 8,31 18,30 18,44 32,44 32,30 "/> </g> </svg><span class="up-arrow">⬆</span> <span class="visuallyhidden">Go to Top</span></a> </p> </div> </article> <footer class="page-footer"> <div class="large-12 columns"> <div class="row"> <div class="large-8 columns"> <p id="license" class="copyright">© 2013 <a href="http://atelierbramdehaan.nl" class="underline">Atelier Bram de Haan</a>, Releases under <a href="http://atelierbram.mit-license.org" class="underline">MIT License</a></p> </div> <div class="large-4 columns"> <a href="https://github.com/atelierbram/syntax-highlighting" class="sh-button">This repo on Github</a> </div> </div> </div> </footer> </div> <script> document.write('<script src=' + ('__proto__' in {} ? '../assets/js/vendor/zepto.min' : '../assets/js/vendor/jquery') + '.js><\/script>') </script> <script src="../assets/js/foundation/foundation.min.js"></script> <script src="../assets/js/foundation/foundation.dropdown.min.js"></script> <script> $(document).foundation(); </script> <script src="../assets/js/vendor/custom.modernizr.js"></script> </body> </html>