JSFiddle - React, Tailwind, and code Playground

by Jonarod

HTML

<script src="https://unpkg.com/[email protected]/dist/marktytoml.umd.js"></script>
<div id="container">
  <div id="input">
    <textarea id="inputArea" rows="4" cols="50">"TOML style" = "Hello World"
YAML style : Hello World

[types]
strings = "192.168.1.1"
integers = 5000
float = 3.14
booleans = true
signed numbers = -23
infinity = -inf
hexadecimals = 0xDEADBEEF
octals = 0o755
binaries = 0b11010110
timestamp = 1979-05-27T00:32:00-07:00
date = 1979-05-27
arrays = [ 8001, 8002, 8003 ]
array of arrays =[[1,2], ["a","b"]]
inline tables = {"key" : "value"}
string literals = '''
 C:\Users\nodejs\templates
'''


[table]
  [table.line1]
  key = "value"

  [table.line2]
  key : value

[[array of table]]
  fruit = banana

[[array of table]]
  fruit = orange

[[array of table]]
  fruit = apple
</textarea>
  </div>
  <div id="output">
    <textarea id="outputArea" rows="4" cols="50"></textarea>
  </div>
</div>

SCSS

* {box-sizing: border-box}
html, body {margin:0; padding:0; height:100%;}
#container {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  width: 100%;
  justify-content: center;
  #input, #output{
    display: flex;
    width: 50%;
    padding: 0px;
  }
  #output{
    border-left: 2px solid #ccc;
  }
  textarea {
      // font-family: sans-serif;
      font-size: 18px;
      padding: 10px;
      border: 0;
    }

}

JavaScript

var input = document.querySelector('#inputArea');
var output = document.querySelector('#outputArea');
input.addEventListener('input', function() {
  parseTOML()
}, false);



function parseTOML() {
  var TOML = input.value;
  output.innerHTML = JSON.stringify(marktytoml(TOML), null, 4)
  console.log(marktytoml(TOML))
}

parseTOML()