test-repo/docs/index.html

<script>global = window;</script>
<script src="prettier.min.js"></script>

<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/addon/display/rulers.js"></script>

<style type="text/css">
  html, body {
    font-family: "Helvetica Neue", "Open Sans", sans-serif;
    font-size: 11.7px;
    margin: 0;
    padding: 0;
    background-color: #444444;
    color: #e2e1e1;
  }
  .title {
    font-style: italic;
    line-height: 19px;
    margin-right: 10px;
  }
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .editors {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin: 5px;
  }
  .editor {
    display: flex;
    flex: 1;
    position: relative;
  }
  .CodeMirror {
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: Menlo, monospace;
    font-size: 11.05px;
    line-height: 17.68px;
  }
  .editor.output .CodeMirror {
    background-color: #fdfcfc;
  }
  .editor.input {
    margin-right: 5px;
  }
  .options {
    display: flex;
    margin: 5px;
    margin-bottom: 0;
  }
  label {
    margin-right: 5px;
  }
  input[type="number"] {
    max-width: 40px;
  }
</style>

<div class="container">
  <div class="options">
    <label class="title">prettier v0.0.5</label>
    <label><input type="number" value="80" id="printWidth"></input> printWidth</label>
    <label><input type="number" value="2" id="tabWidth"></input> tabWidth</label>
    <label><input type="checkbox" id="singleQuote"></input> singleQuote</label>
    <label><input type="checkbox" id="trailingComma"></input> trailingComma</label>
    <label><input type="checkbox" id="bracketSpacing" checked></input> bracketSpacing</label>
  </div>

  <div class="editors">
    <div class="editor input">
      <textarea id="input"></textarea>
    </div>
    <div class="editor output">
      <textarea id="output"></textarea>
    </div>
  </div>
</div>

<script id="code">
var OPTIONS = ['printWidth', 'tabWidth', 'singleQuote', 'trailingComma', 'bracketSpacing'];
function setOptions(options) {
  OPTIONS.forEach(function(option) {
    var elem = document.getElementById(option);
    if (elem.type === 'number') {
      elem.value = options[option];
    } else {
      elem.checked = options[option];
    }
  });
}

function getOptions() {
  var options = {};
  OPTIONS.forEach(function(option) {
    var elem = document.getElementById(option);
    options[option] = elem.type === 'number' ? +elem.value : elem.checked;
  });
  return options;
}

function format() {
  var options = getOptions();
  outputEditor.setOption('rulers', [{column: options.printWidth, color: '#444444'}]);
  var value = encodeURIComponent(
    JSON.stringify(
      Object.assign({content: inputEditor.getValue(), options: options})
    )
  );
  location.hash = value;
  var res;
  try {
    res = prettier.format(inputEditor.getValue(), options);
  } catch (e) {
    res = e.toString();
  }
  outputEditor.setValue(res);
}

document.getElementsByClassName('options')[0].onchange = format;

var inputEditor = CodeMirror.fromTextArea(input);
inputEditor.on('change', format);
var outputEditor = CodeMirror.fromTextArea(output, {readOnly: true});
</script>

<script>
try {
  var json = JSON.parse(decodeURIComponent(location.hash.slice(1)));
  setOptions(json.options);
  inputEditor.setValue(json.content);
} catch (e) {
  inputEditor.setValue(code.innerText.trim());  
}
</script>