tonyfast/index.html

## 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 "//cdn.jsdelivr.net/g/github-markdown-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;
  }
  .markdown {
    margin: 10%;
  }
</style>
</head>
<body>
<header>
  <h1>
    <a href="http://archieml.org">Archie</a> mode for
    <a href="http://codemirror.net">Codemirror</a>
  </h1>
</header>
<div class="archie">
<textarea>An h1 header
============

Paragraphs are separated by a blank line.
{styles}
2nd paragraph.
italic: *Italic*,
bold: **bold**, and
monospace: `monospace`
. Itemized lists
look like:
[items]

  * this one
  * that one
  * the other one

Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺

:end</textarea>
</div>
<div class="json">
  <textarea>{"json": "here"}</textarea>
</div>
<br>

<div class="markdown">
  <h1>
    <a href="https://github.com/chjj/marked">Markdown </a>
  </h1>
  <div class="markdown-body"></div>
</div>

<script src="https://rawgit.com/newsdev/archieml-js/80b19e7c3b86944fce9d5e7d97a63bca291d329c/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="https://cdn.rawgit.com/chjj/marked/master/marked.min.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() {

    var v = archie.getValue();

    $('.markdown-body').innerHTML = marked(v);

    return json.setValue(
      JSON.stringify(
        archieml.load(v),
        null,
        2));
  }

  archie.on("change", onChange);
  onChange();


</script>
</body>
</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 "//cdn.jsdelivr.net/g/github-markdown-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;
	}
	.markdown {
	margin: 10%;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>
	<a href="http://archieml.org">Archie</a> mode for
	<a href="http://codemirror.net">Codemirror</a>
	</h1>
	</header>
	<div class="archie">
	<textarea>An h1 header
	============

	Paragraphs are separated by a blank line.
	{styles}
	2nd paragraph.
	italic: Italic,
	bold: bold, and
	monospace: `monospace`
	. Itemized lists
	look like:
	[items]

	* this one
	* that one
	* the other one

	Note that --- not considering the asterisk --- the actual text
	content starts at 4-columns in.

	> Block quotes are
	> written like so.
	>
	> They can span multiple paragraphs,
	> if you like.

	Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
	in chapters 12--14"). Three dots ... will be converted to an ellipsis.
	Unicode is supported. ☺

	:end</textarea>
	</div>
	<div class="json">
	<textarea>{"json": "here"}</textarea>
	</div>
	<br>

	<div class="markdown">
	<h1>
	<a href="https://github.com/chjj/marked">Markdown </a>
	</h1>
	<div class="markdown-body"></div>
	</div>

	<script src="https://rawgit.com/newsdev/archieml-js/80b19e7c3b86944fce9d5e7d97a63bca291d329c/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="https://cdn.rawgit.com/chjj/marked/master/marked.min.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() {

	var v = archie.getValue();

	$('.markdown-body').innerHTML = marked(v);

	return json.setValue(
	JSON.stringify(
	archieml.load(v),
	null,
	2));
	}

	archie.on("change", onChange);
	onChange();


	</script>
	</body>
	</html>