ArchieML Codemirror mode by bollwyvl

index.html

<!DOCTYPE html>
<html>
<head>
<style>
  @import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.13.0/codemirror.min.css";
  @import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.13.0/theme/blackboard.css";
  
  
  /*
  @import "./codemirror.min.css";
  @import "./blackboard.css";
  */
  
  body {
    margin: 0;
    padding: 10px;
  }
  textarea,
  .CodeMirror {
    float: left;
    height: 84vh;
    width: 47%;
    margin-left: 2%;
    font-size: 1.5em;
  }
</style>
</head>
<body>
<header>
  <h1>
    <a href="//archieml.org">Archie</a> mode for
    <a href="//codemirror.net">Codemirror</a>
  </h1>
</header>
<div class="archie">
<textarea>headline: Bait and Switch, a Common Ploy of Patriots and Seahawks
leadin: The Patriots and the Seahawks [IGNORED] ...

[sections]
kicker: New England Patriots
hed: Patriovs vs. Ravens, Jan. 10

colors.red: #f00
colors.green: #0f0
colors.blue: #00f

[days]
* Sunday
note: holiday!
* Monday
* Tuesday

Whitespace is still fine around the '*'
    *   Wednesday

* Thursday

Friday!
* Friday
* Saturday
[]

key: value
More value

Even more value
:end</textarea>
</div>
<div class="json">
  <textarea>{"json": "here"}</textarea>
</div>


<script src="//cdn.rawgit.com/newsdev/archieml-js/v0.1.1/archieml.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.13.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.13.0/addon/mode/simple.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.13.0/mode/javascript/javascript.js"></script>

<!--
<script src="./archieml.js"></script>
<script src="./codemirror.min.js"></script>
<script src="./simple.js"></script>
<script src="./javascript.js"></script>
-->

<script>
  CodeMirror.defineSimpleMode("archieml", {
    start: [
      // architeml key
      {regex: /(\s*)([^\s:\.]+)([^\s:]*)(\s*)(:)(\s*)/,
        token: [null, "keyword", "variable", null, "keyword", null],
        sol: true,
        push: "value"},
      // archieml list
      {regex: /\s*\[[^\]]*\]\s*/,
        token: "variable",
        push: "list",
        sol: true},
      {regex: /:(endskip|ignore|skip|end)/, token: "builtin"},
      {regex: /.*$/,
        token: "comment"}
    ],
    value: [
      {regex: /\w$/,
        pop: true},
      {regex: /\[/,
        token: "meta",
        push: "comment"},
    ],
    list: [
      {regex: /\s*\[\]\s*/,
        token: "variable",
        sol: true,
        pop: true},
      {regex: /\s*\*\s*/,
        token: "keyword",
        sol: true},
    ],
    comment: [
      {regex: /]/,
        token: "meta",
        pop: true},
      {regex: /[^\]]*/,
        token: "comment"},
    ]
  });
</script>

<script>
  var $ = function($){ return document.querySelector($) };

  var archie = CodeMirror.fromTextArea($(".archie textarea"), {
      mode: "archieml",
      theme: "blackboard",
      lineWrapping: true
    }),
    json = CodeMirror.fromTextArea($(".json textarea"), {
      mode: "application/ld+json",
      theme: "blackboard",
      lineWrapping: true,
      readOnly: true
    });

  var onChange = function() {
    return json.setValue(
      JSON.stringify(
        archieml.load(archie.getValue()),
        null,
        2));
  }
  
  archie.on("change", onChange);
  onChange();
  
  
</script>
</body>
</html>