mirror of
https://github.com/braver/programmingfonts.git
synced 2024-11-03 14:31:05 +01:00
229 lines
11 KiB
HTML
Executable File
229 lines
11 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><a href="http://programmingfonts.org">Programming Fonts</a></h1>
|
|
<p>Test drive over 50 free programming fonts!</p>
|
|
<p>
|
|
<a href="https://github.com/braver/programmingfonts"><svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
|
|
</p>
|
|
<p>
|
|
<a href="http://programmingfonts.org">Blog</a> -
|
|
<a href="http://atom.io/packages/fonts" rel="external">Atom package</a> -
|
|
<a href="https://www.sublimetext.com/docs/3/font.html" rel="external">Sublime Text docs</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>
|