syntax-highlighting
Version:
Syntax Highlighting Colorschemes for many applications
232 lines (209 loc) • 7.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CodeMirror: Theme Demo - DuoTone - LESS mode</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
<link rel=stylesheet href="../doc/docs-custom.css">
<link rel="stylesheet" href="../lib/codemirror.css">
<link rel="stylesheet" href="../addon/hint/show-hint.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-dark-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darksea-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkspace-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkearth-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkforest-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkcave-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkdesert-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkheath-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkmeadow-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkpark-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darkpool-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-darklake-cm.css">
<link rel="stylesheet" href="../../output/codemirror/duotone-light-light-cm.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/css-hint.js"></script>
<script src="../addon/selection/active-line.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<style type="text/css">
.CodeMirror {border: 1px solid transparent; font-size:13px}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="no-index, no-follow">
</head>
<body>
<div id=nav>
<a href="http://codemirror.net"><h1>CodeMirror</h1></a>
<ul>
<li><a href="https://codemirror.net/index.html">CodeMirror</a></li>
<li><a href="https://codemirror.net/doc/manual.html">Manual</a></li>
<li><a href="https://github.com/codemirror/codemirror">GitHub</a></li>
</ul>
<ul>
<li><a class=active href="#">Theme</a></li>
<li><a href="http://simurai.com/projects/2016/01/01/duotone-themes">DuoTone themes</a></li>
</ul>
<ul>
<h3>Modes</h3>
<li><a href="theme-htmlmixed.html#duotone-dark-cm">HTML</a></li>
<li><a href="theme-css.html#duotone-dark-cm">CSS</a></li>
<li><a href="theme-js.html#duotone-dark-cm">JavaScript</a></li>
<li><a href="theme-markdown.html#duotone-dark-cm">Markdown</a></li>
<li><a href="theme-scss.html#duotone-dark-cm">Scss</a></li>
<li><a class=active href="#">Less</a></li>
<li><a href="theme-sass.html#duotone-dark-cm">Sass</a></li>
<li><a href="theme-haml.html#duotone-dark-cm">Haml</a></li>
<li><a href="theme-slim.html#duotone-dark-cm">Slim</a></li>
<!-- <li><a href="theme-jade.html#duotone-dark-cm">Jade</a></li> -->
<li><a href="theme-coffee.html#duotone-dark-cm">CoffeeScript</a></li>
</ul>
</div>
<article>
<h2>Theme Demo - DuoTone - LESS mode</h2>
<form><textarea id="code" name="code">
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
html:lang(fr-be)
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
body > h2:not(:first-of-type):not(:last-of-type)
html|*:not(:link):not(:visited)
*|*:not(:hover)
p::first-line { text-transform: uppercase }
@namespace foo url(http://www.example.com);
foo|h1 { color: blue } /* first rule */
span[hello="Ocean"][goodbye="Land"]
E[foo]{
padding:65px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
.btn {
// reset here as of 2.0.3 due to Recess property order
border-color: #ccc;
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
}
fieldset span button, fieldset span input[type="file"] {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
@import url("something.css");
@light-blue: hsl(190, 50%, 65%);
#menu {
position: absolute;
width: 100%;
z-index: 3;
clear: both;
display: block;
background-color: @blue;
height: 42px;
border-top: 2px solid lighten(@alpha-blue, 20%);
border-bottom: 2px solid darken(@alpha-blue, 25%);
.box-shadow(0, 1px, 8px, 0.6);
-moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
&.docked {
background-color: hsla(210, 60%, 40%, 0.4);
}
&:hover {
background-color: @blue;
}
#dropdown {
margin: 0 0 0 117px;
padding: 0;
padding-top: 5px;
display: none;
width: 190px;
border-top: 2px solid @medium;
color: @highlight;
border: 2px solid darken(@medium, 25%);
border-left-color: darken(@medium, 15%);
border-right-color: darken(@medium, 15%);
border-top-width: 0;
background-color: darken(@medium, 10%);
ul {
padding: 0px;
}
li {
font-size: 14px;
display: block;
text-align: left;
padding: 0;
border: 0;
a {
display: block;
padding: 0px 15px;
text-decoration: none;
color: white;
&:hover {
background-color: darken(@medium, 15%);
text-decoration: none;
}
}
}
.border-radius(5px, bottom);
.box-shadow(0, 6px, 8px, 0.5);
}
}
</textarea></form>
<p>Select a theme:</p>
<div class="button dropdown">
<select onchange="selectTheme()" id="select">
<option selected>default</option>
<option>duotone-dark-cm</option>
<option>duotone-darksea-cm</option>
<option>duotone-darkspace-cm</option>
<option>duotone-darkearth-cm</option>
<option>duotone-darkforest-cm</option>
<option>duotone-darkcave-cm</option>
<option>duotone-darkdesert-cm</option>
<option>duotone-darkheath-cm</option>
<option>duotone-darkmeadow-cm</option>
<option>duotone-darkpark-cm</option>
<option>duotone-darkpool-cm</option>
<option>duotone-darklake-cm</option>
<option>duotone-light-light-cm</option>
</select>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode: "text/x-less"
});
var input = document.getElementById("select");
function selectTheme() {
var theme = input.options[input.selectedIndex].textContent;
editor.setOption("theme", theme);
location.hash = "#" + theme;
}
var choice = (location.hash && location.hash.slice(1)) ||
(document.location.search &&
decodeURIComponent(document.location.search.slice(1)));
if (choice) {
input.value = choice;
editor.setOption("theme", choice);
}
CodeMirror.on(window, "hashchange", function() {
var theme = location.hash.slice(1);
if (theme) { input.value = theme; selectTheme(); }
});
</script>
</article>
</body>
</html>