JS-YAML

index.slim

div.container ng-app="codepen"
  div.row
    div.col-md-12
      h1.page-header Unofficial JS-YAML demo. YAML JavaScript parser.
  div.row ng-controller="MainCtrl"
    div.col-md-6
      div.panel.panel-default
        div.panel-heading Source
        div.panel-body
          form role="form"
            textarea.form-control ng-model="source"
    div.col-md-6
      div.panel.panel-default
        div.panel-heading Result
        div.panel-body
          pre.pre-scrollable
            | {{ safeLoad(source) | json }}

js-yaml.markdown

JS-YAML

YAML 1.2 parser and serializer for JavaScript

A Pen by Weera Wu on CodePen.

License.

script.coffeescript

app = angular.module('codepen', [])

app.controller 'MainCtrl', ($scope, $http) ->
  $scope.safeLoad = (string) ->
    try
      jsyaml.safeLoad string
    catch error
      error.stack || String(error)
  
  yaml = 'https://codepen.io/wulab/pen/aAnHc.html'
  $http.get(yaml).success (data) ->
    $scope.source = data

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-yaml/3.4.2/js-yaml.min.js"></script>

style.scss

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

textarea {
  font-family: monospace;

  .panel-body & {
    height: 500px;
  }
}

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
  
  .panel-body & {
    margin-bottom: 0;
    height: 500px;
  }

  &.pre-scrollable {
    /* reset max-height to set height */
    max-height: none;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />