prettier/docs/index.html

Prettier is an opinionated JavaScript formatter

<meta charset="utf-8">
<title>Prettier</title>

<script>global = window;</script>
<script>Buffer = {isBuffer: function() { return false; }};</script>
<script src="prettier.min.js"></script>

<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/theme/base16-dark.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>
<script src="https://codemirror.net/addon/search/searchcursor.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/addon/edit/closebrackets.js"></script>
<script src="https://codemirror.net/addon/comment/comment.js"></script>
<script src="https://codemirror.net/addon/wrap/hardwrap.js"></script>
<script src="https://codemirror.net/keymap/sublime.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 {
    margin-left: 5px;
  }
  .editor:first-child {
    margin-left: 0;
  }
  .options {
    display: flex;
    margin: 5px;
    margin-bottom: 0;
  }
  .title a {
    color: #e2e1e1;
  }
  .title a:hover {
    color: #fdfcfc;
  }
  label {
    margin-right: 5px;
  }
  input[type="number"] {
    max-width: 40px;
  }
</style>

<div class="container">
  <div class="options">
    <label class="title"><a href="https://github.com/jlongster/prettier">prettier v<span class="version"></span></a></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>
    <span style="flex: 1"></span>
    <label><input type="checkbox" id="doc"></input> doc</label>
  </div>

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

<script id="code">
var OPTIONS = ['printWidth', 'tabWidth', 'singleQuote', 'trailingComma', 'bracketSpacing', 'doc'];
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' ? Number(elem.value) : elem.checked;
  });
  return options;
}

function format() {
  var options = getOptions();
  [docEditor, outputEditor].forEach(function(editor) {
    editor.setOption(
      'rulers',
      [{column: options.printWidth, color: '#444444'}]
    );
  });
  document.getElementsByClassName('doc')[0].style.display = options.doc ? 'flex' : 'none';

  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);

  if (options.doc) {
    var debug;
    try {
      var doc = prettier.__debug.printToDoc(inputEditor.getValue(), options);
      debug = prettier.__debug.formatDoc(doc, options);
    } catch (e) {
      debug = e.toString();
    }
    docEditor.setValue(debug);
  }
}

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

var editorOptions = {
  lineNumbers: true,
  keyMap: "sublime",
  autoCloseBrackets: true,
  matchBrackets: true,
  showCursorWhenSelecting: true,
  theme: 'base16-dark',
  tabWidth: 2
};
var inputEditor = CodeMirror.fromTextArea(
  document.getElementById('input-editor'),
  editorOptions
);
inputEditor.on('change', format);

var docEditor = CodeMirror.fromTextArea(
  document.getElementById('doc-editor'),
  {readOnly: true, lineNumbers: true, theme: 'base16-dark'}
);

var outputEditor = CodeMirror.fromTextArea(
  document.getElementById('output-editor'),
  {readOnly: true, lineNumbers: true, theme: 'base16-dark'}
);

document.getElementsByClassName('version')[0].innerText = prettier.version;
</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>