Currently, CodePan stores Gists in a way that is not very readable. CodePan-generated Gists would be much better to share if they were readable by humans without viewing through CodePan.

I suggest the following:

• Store all CodePan config like opened pans in a file like codepan.json

• Store pan contents in separate files like index.html, index.js, index.css

• Infer pan and transformer from file extension like this:

  Filename	Pan	Transformer
  *.html	HTML	HTML
  *.scss	CSS	SCSS
  *.ts	JS	TypeScript

  This can be overwritten in the CodePan config like so:

  codepan.json

  {
    "files": {
      "index.js": {
        "transformer": "babel"
      },
      "test.txt": {
        "pan": "html",
        "transformer": "markdown"
      }
  }

  Alternatively, a pragma comment could be added at the top of files:

  index.js

  // @codepan { transformer: 'babel' }

  test.txt

  <!-- @codepan { pan: 'html', transformer: 'markdown' } -->

• If, by these rules, multiple files should be displayed in the same tab, only use the alphabetically first one for the sake of simplicity

• Preserve line breaks and spacing

Following these rules, this Gist would be formatted like this instead.

By using sensible defaults for codepan.json, this would potentially also have the side effect of being able to open any Gist even if it wasn't created in CodePan!