Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/README.md

Last active August 29, 2015 14:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfast/d315788df0095ac46d74 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfast/d315788df0095ac46d74 to your computer and use it in GitHub Desktop.
Download ZIP
A Javascript Sandbox for YAML.
Raw
README.md

YAML Sandbox in Javascript

A javascript tool to explore YAML usage and syntax. YAML is a simple data serialization language that is parsed into JSON. It provides comments and more canonical syntax than JSON.

How to Use

  • Fork & Modify demo.yaml

  • Visit bl.ocks.org for a preview (example)

    you will probably need to click Open in a New Window for the entire page view.

  • Read more at the YAML project site

How it Works

Testing Handlebars

{{demo.tags}} with units of {{demo.units.0.x}}

Raw
demo.yaml
new: one
# An example data file pointing to external resources for the data
description: >
Segmented $\alpha&-$\beta$ Titanium micrographs from Pete Collins at UNT.
# Volume Fraction Calculation
gist: https://gist.github.com/tonyfast/afafb762798e9204bac4
volumefraction: 0.60206419148851
tags:
- Experiment1
- AnalysisMagic
units:
- x: 10 #microns/pixel
y: 10 #microns/pixel
# Images avaiable on Flickr
flickr:
view: https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094
# parent set
set: https://www.flickr.com/photos/tonyfast/sets/72157641959260094/
author:
- name: Tony Fast
- email: tony.fast@gmail.com
thumb: https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.0.2/js-yaml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
</head>
<body>
<p>
<h2>YAML Input</h2>
<i><a href="http://www.yaml.org/">YAML</a> is human friendly data serialization language.
It supports all the features of JSON plus commenting and more canonical syntax.</i>
<pre>
<code class="yaml">
</code>
</pre>
</p>
<h2>JSON-ified YAML</h2>
<i>Below is a JSON-ified version of the YAML above. The comments have been stripped
and individual values have been fenced in by braces and quotes. JSON can be used directly
in Javscript code.
</i>
<pre>
<code class="json">
</code>
</pre>
<script>
function PopHTML( yml ){
// Populate YAML and Javascript text in HTML
$(".yaml").text(yml);
var obj = jsyaml.load( yml );
$(".json").text(JSON.stringify( obj, null, 2 ))
}
// Initialize Highlighting
hljs.initHighlightingOnLoad();
// Read demo yaml content
$.get( 'demo.yaml', function(data){PopHTML( data ) } );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment