86 lines
2.6 KiB
Cheetah
86 lines
2.6 KiB
Cheetah
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Chroma Playground</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"/>
|
|
<style>
|
|
textarea {
|
|
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
|
}
|
|
|
|
#output {
|
|
{{.Background}};
|
|
}
|
|
|
|
#output pre {
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
<script src="static/index.js?{{.Version}}"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<h1 class="title">Chroma Playground</h1>
|
|
|
|
<div class="notification">
|
|
<a href="https://github.com/alecthomas/chroma">Chroma</a> is a general purpose syntax highlighter in pure Go.
|
|
It takes source code and other structured text and converts it into syntax highlighted HTML, ANSI-coloured text,
|
|
etc. Chroma is based heavily on Pygments, and includes translators for Pygments lexers and styles.
|
|
</div>
|
|
|
|
<form id="chroma" method="post">
|
|
{{ .CSRFField }}
|
|
<div class="columns">
|
|
<div class="column field">
|
|
<label class="label">Language</label>
|
|
<div class="control">
|
|
<div class="select">
|
|
<select name="language" id="language">
|
|
<option value="" disabled{{if eq "" $.SelectedLanguage}} selected{{end}}>Language</option>
|
|
{{- range .Languages}}
|
|
<option value="{{.}}"{{if eq . $.SelectedLanguage}} selected{{end}}>{{.}}</option>
|
|
{{- end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column field">
|
|
<label class="label">Style</label>
|
|
<div class="control">
|
|
<div class="select">
|
|
<select name="style" id="style">
|
|
<option value="" disabled{{if eq "" $.SelectedStyle}} selected{{end}}>Style</option>
|
|
{{- range .Styles}}
|
|
<option value="{{.}}"{{if eq . $.SelectedStyle}} selected{{end}}>{{.}}</option>
|
|
{{- end}}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Code</label>
|
|
<div class="control">
|
|
<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="textarea" id="text" name="text" rows="25" cols="80"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<label class="checkbox is-pulled-right">
|
|
<input name="html" id="html" type="checkbox">
|
|
Show HTML
|
|
</label>
|
|
|
|
<label class="label">
|
|
Output
|
|
</label>
|
|
|
|
<div class="field box" id="output"></div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html> |