djedi/app.html

## app.html
<template>
  <require from="./toggle-code"></require>

  <toggle-code>
<br><hr>
  </toggle-code>

  <toggle-code>
<foo></foo>
<bar></bar>
  </toggle-code>

  <toggle-code>
blah blah blah
  </toggle-code>

</template>

## app.js
export class App {

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## toggle-code.html
<template>
    <div style="${visible ? '' : 'display:none'}">
        <div style="border 1px solid gray">
            <pre><code class="language-markup" au-syntax><slot></slot></code></pre>
        </div>
    </div>
    <button click.trigger="toggleCodeBlock()">${visible ? 'Hide' : 'Show'} Code</button>
    <br><br>
</template>

## toggle-code.js
import {processContent, bindable, child} from 'aurelia-framework';


@processContent((compiler, resources, node) => {
    node.innerHTML = node.innerHTML.escapeHtml();
    return true;
})
export class toggleCode {
    attached() {
        this.visible = true;
    }

    toggleCodeBlock() {
        this.visible = !this.visible;
    }
}

(function(){
  "use strict";

  function escapeHtml() {
    return this.replace(/[&<>"'\/]/g, function (s) {
      var entityMap = {
          "&": "&amp;",
          "<": "&lt;",
          ">": "&gt;",
          '"': '&quot;',
          "'": '&#39;',
          "/": '&#x2F;'
        };

      return entityMap[s];
    });
  }

  if (typeof(String.prototype.escapeHtml) !== 'function') {
    String.prototype.escapeHtml = escapeHtml;
  }
})();
	<template>
	<require from="./toggle-code"></require>

	<toggle-code>
	<br><hr>
	</toggle-code>

	<toggle-code>
	<foo></foo>
	<bar></bar>
	</toggle-code>

	<toggle-code>
	blah blah blah
	</toggle-code>

	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<div style="${visible ? '' : 'display:none'}">
	<div style="border 1px solid gray">
	<pre><code class="language-markup" au-syntax><slot></slot></code></pre>
	</div>
	</div>
	<button click.trigger="toggleCodeBlock()">${visible ? 'Hide' : 'Show'} Code</button>
	<br><br>
	</template>
	import {processContent, bindable, child} from 'aurelia-framework';


	@processContent((compiler, resources, node) => {
	node.innerHTML = node.innerHTML.escapeHtml();
	return true;
	})
	export class toggleCode {
	attached() {
	this.visible = true;
	}

	toggleCodeBlock() {
	this.visible = !this.visible;
	}
	}

	(function(){
	"use strict";

	function escapeHtml() {
	return this.replace(/[&<>"'\/]/g, function (s) {
	var entityMap = {
	"&": "&",
	"<": "<",
	">": ">",
	'"': '"',
	"'": ''',
	"/": '/'
	};

	return entityMap[s];
	});
	}

	if (typeof(String.prototype.escapeHtml) !== 'function') {
	String.prototype.escapeHtml = escapeHtml;
	}
	})();