openpolitics/groupthink

<link rel="stylesheet" href="https://unpkg.com/easymde@2.9.0/dist/easymde.min.css" integrity="sha384-FAuhUTeRrv9xA8b+724/Hfc69EqCqbySHAtoLXt2pVIevuLQ5YBiegzQULs6WKrh" crossorigin="anonymous">
<script src="https://unpkg.com/easymde@2.9.0/dist/easymde.min.js" integrity="sha384-N2niw6YEQdfj573L2ygSuhCNfIonz8O1jnPRZa2kn+KpMSHfjnpM0Fr/t4yG9PFS" crossorigin="anonymous"></script>

<div class='row'>
  <div class='col-md-8'>
    <%= text_area_tag 'content', @content, style: 'width: 100%; min-height: 700px; font-family: monospace' %>
  </div>
  <div class='col-md-4'>
    <small>
    <p>
      This file is written using <a href="https://help.github.com/articles/basic-writing-and-formatting-syntax/">Markdown</a>, a simple text formatting method.
    </p>
    <h4>Headings</h4>
    <p>
      Headings use <code>#</code> at the start of the line. Smaller headings use more <code>#</code> symbols.
    </p>
    <pre># Top-level heading
## Second-level heading
### Third-level heading</pre>
    <h4>Links</h4>
    <p>
      Create links by putting square brackets around the text to link, and then the URL in round brackets afterwards:
    </p>
    <pre>Visit [Wikipedia](https://wikipedia.org).</pre>
    <h4>Lists</h4>
    <p>
      Create bulleted lists by using a <code>* </code> with a space after at the start of each line.
      Use <code>1. </code> with a space after to create numbered lists. You don't need to change the number each time.
    </p>
    <pre>* Bulleted
* List

1. Numbered
1. List</pre>
    <h4>Styling</h4>
    <p>
      To create italic text, surround it with a single <code>*</code>:
    </p>
    <pre>This is in *italics*</pre>
    <p>
      For bold text, surround it with two stars:
    </p>
    <pre>This is in **bold**</pre>
    <h4>Footnotes</h4>
    <p>
      To create footnotes, add a unique id in your text like so:
    </p>
    <pre>[^my-unique-id]</pre>
    <p>
      and then before the next paragraph, add the footnote:
    </p>
    <pre>[^my-unique-id]: This is the footnote text.</pre>
  </small>
  </div>
</div>

<script>
var easyMDE = new EasyMDE({
  hideIcons: ["heading", "image", "fullscreen", "side-by-side"],
  showIcons: ["heading-2", "heading-3"],
  status: false,
  autofocus: true
});
</script>