Viewing github.com/alecthomas/chroma/cmd/chromad/templates/index.html.tmpl

```
<!doctype html>
```
```
<html>
```
```
<head>
```

  <title>Chroma Playground ({{.Version}})</title>

```
  <style>
```
```
    {{CSS "index.css"}}
```
```
    #output {
```
```
      {{.Background}};
```
```
    }
```
```
  </style>
```
```
</head>
```
```
<body>
```
```
<div class="container">
```

  <h1 class="title">Chroma Playground ({{.Version}})</h1>

```
  <div class="notification">
```
```
    <button class="delete"></button>
```

    <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 }}
```
```
    <nav class="level">
```
```
      
```
```
      <div class="level-left">
```
```
        <div class="level-item">
```

          <div class="label">Code</div>

```
        </div>
```
```
        <div class="level-item">
```
```
          <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="level-item">
```
```
          <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="level-right">
```
```
        <div class="level-item">
```

            <button name="copy" id="copy" class="button">

              <span class="icon is-small">

                <ion-icon name="copy-outline"></ion-icon>

```
              </span>
```
```
            </button>
```
```
        </div>
```
```
      </div>
```
```
  </nav>
```
```
    <div class="field">
```
```
      <div class="control">
```

        <textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="textarea" id="text" name="text" rows="15" 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>
```
```
<script type="module">
```
```
{{JS "index.js"}}
```
```
</script>
```

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

```
</body>
```
```
</html>
```