Skip to content

Instantly share code, notes, and snippets.

@bollwyvl

bollwyvl/index.html

Last active October 9, 2019 16:21
Show Gist options
  • Save bollwyvl/1a88ab73c5e2f0a06dc5 to your computer and use it in GitHub Desktop.
Save bollwyvl/1a88ab73c5e2f0a06dc5 to your computer and use it in GitHub Desktop.
Download ZIP
ArchieML Codemirror mode
Raw
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="http://archieml.org">Archie</a> mode for
<a href="http://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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment