227 lines
10 KiB
HTML
Executable File
227 lines
10 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Programming Fonts - Test Drive</title>
|
|
<meta charset="utf-8"/>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff6a00">
|
|
|
|
<!-- YUI reset -->
|
|
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
|
|
|
|
|
|
<!-- CodeMirror -->
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.css">
|
|
<!-- CodeMirror Themes -->
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/3024-day.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/3024-night.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/abcdef.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/ambiance.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/base16-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/base16-light.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/bespin.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/blackboard.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/cobalt.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/colorforth.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/dracula.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/duotone-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/duotone-light.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/erlang-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/hopscotch.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/isotope.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/lesser-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/liquibyte.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/material.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/mbo.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/mdn-like.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/midnight.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/monokai.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/neo.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/night.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/paraiso-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/paraiso-light.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/pastel-on-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/railscasts.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/rubyblue.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/seti.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/the-matrix.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/tomorrow-night-bright.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/tomorrow-night-eighties.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/twilight.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/vibrant-ink.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/xq-dark.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/yeti.css">
|
|
|
|
<!-- CodeMirror JS -->
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/edit/matchbrackets.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/addon/selection/active-line.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/javascript/javascript.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/php/php.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/clike/clike.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/ruby/ruby.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/css/css.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/perl/perl.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/shell/shell.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/r/r.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/go/go.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/haskell/haskell.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/mode/swift/swift.min.js"></script>
|
|
|
|
<link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css" />
|
|
|
|
<link rel="stylesheet" href="fonts/stylesheets/stylesheet.css"><!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
|
|
<link rel="stylesheet" href="index.css">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="article-wrapper">
|
|
<article>
|
|
<section class="select-list">
|
|
<div id="select-font">
|
|
<!-- filled from json -->
|
|
</div>
|
|
</section>
|
|
<section class="config">
|
|
<p>
|
|
<label for="size">Size</label>
|
|
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
|
|
</p>
|
|
<p>
|
|
<label for="spacing">Spacing</label>
|
|
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
|
|
</p>
|
|
<p>
|
|
<label for="aliasing">AA</label>
|
|
<input onchange="setAntialiasing()" type="checkbox" id="aliasing" checked>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="config">
|
|
<p class="select">
|
|
<button class="nav-button" id="theme-previous">↑</button>
|
|
<button class="nav-button" id="theme-next">↓</button>
|
|
<label for="select-theme">Theme</label>
|
|
<select onchange="selectTheme()" id="select-theme">
|
|
<option>3024-day</option>
|
|
<option>3024-night</option>
|
|
<option>abcdef</option>
|
|
<option>ambiance</option>
|
|
<option>base16-dark</option>
|
|
<option>base16-light</option>
|
|
<option>bespin</option>
|
|
<option>blackboard</option>
|
|
<option>cobalt</option>
|
|
<option>colorforth</option>
|
|
<option>dracula</option>
|
|
<option>duotone-dark</option>
|
|
<option>duotone-light</option>
|
|
<option>erlang-dark</option>
|
|
<option>hopscotch</option>
|
|
<option>isotope</option>
|
|
<option>lesser-dark</option>
|
|
<option>liquibyte</option>
|
|
<option>material</option>
|
|
<option>mbo</option>
|
|
<option>mdn-like</option>
|
|
<option>midnight</option>
|
|
<option selected>monokai</option>
|
|
<option>neo</option>
|
|
<option>night</option>
|
|
<option>paraiso-dark</option>
|
|
<option>paraiso-light</option>
|
|
<option>pastel-on-dark</option>
|
|
<option>railscasts</option>
|
|
<option>rubyblue</option>
|
|
<option>seti</option>
|
|
<option>the-matrix</option>
|
|
<option>tomorrow-night-bright</option>
|
|
<option>tomorrow-night-eighties</option>
|
|
<option>twilight</option>
|
|
<option>vibrant-ink</option>
|
|
<option>xq-dark</option>
|
|
<option>yeti</option>
|
|
</select>
|
|
</p>
|
|
<p class="select">
|
|
<label for="select-language">Language</label>
|
|
<select onchange="selectLanguage()" id="select-language">
|
|
<option selected="">JavaScript</option>
|
|
<option>PHP</option>
|
|
<option value="clike">C (-like)</option>
|
|
<option>Ruby</option>
|
|
<option>CSS</option>
|
|
<option>Perl</option>
|
|
<option>Shell</option>
|
|
<option>R</option>
|
|
<option>Go</option>
|
|
<option>Haskell</option>
|
|
<option>Swift</option>
|
|
</select>
|
|
</p>
|
|
</section>
|
|
|
|
<footer>
|
|
<h1>Programming Fonts</h1>
|
|
<p>Test drive over 50 free programming fonts!</p>
|
|
<p>
|
|
<a href="http://programmingfonts.org">Blog</a> -
|
|
<a href="http://programmingfonts.org/list" rel="external">The full list</a> -
|
|
<a href="http://atom.io/packages/fonts" rel="external">Atom package</a> -
|
|
<a href="https://github.com/braver/programmingfonts">Github</a>
|
|
</p>
|
|
</footer>
|
|
|
|
</article>
|
|
</div>
|
|
|
|
<form>
|
|
<textarea id="code" name="code">
|
|
// Type some code ->
|
|
|
|
console.log "oO0 iIlL1 g9qCGQ ~-+=>";
|
|
|
|
function updateGutters(cm) {
|
|
var gutters = cm.display.gutters,
|
|
specs = cm.options.gutters;
|
|
|
|
removeChildren(gutters);
|
|
|
|
for (var i = 0; i < specs.length; ++i) {
|
|
var gutterClass = specs[i];
|
|
var gElt = gutters.appendChild(
|
|
elt(
|
|
"div",
|
|
null,
|
|
"CodeMirror-gutter " + gutterClass
|
|
)
|
|
);
|
|
if (gutterClass == "CodeMirror-linenumbers") {
|
|
cm.display.lineGutter = gElt;
|
|
gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
|
|
}
|
|
}
|
|
gutters.style.display = i ? "" : "none";
|
|
updateGutterSpace(cm);
|
|
|
|
return false;
|
|
}
|
|
|
|
</textarea>
|
|
</form>
|
|
|
|
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="ga.js"></script>
|
|
<script src="index.js"></script>
|
|
|
|
|
|
</body>
|
|
</html>
|