Display markdown from a file resource on an xpage

<?xml version="1.0" encoding="UTF-8"?>
<!--
Welcome to this snippet on displaying markdown on an XPage.
You will need to : 
1) download showdown.min.js from https://github.com/showdownjs/showdown/releases
2) save it as a file resource within your nsf ( you can aslo modify the code to use a cdn )
3) create another file resources called demo.md with some markdown in it.
4) download this css file and add it as a CSS resource - https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css
5) paste all of this code here into an empty XPage
6) build and view in a web browser. The text displayed will be the contents of the demo.md file

The contents of the md file is stored in a hidden field using ssjs
The csjs in the script block then converts and renders the text as markdown.
The frig to load the js library first is important.

There is a complete demo database at http://focul.net/showdown

Sean Cull, http://focul.net, 10.12.2016 , Apache V2
-->
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core">
<!--  This approach forces the showdown.js file to load first. See http://hasselba.ch/blog/?p=1181
The showdown.js library is stored as a file resource and can be found at https://github.com/showdownjs/showdown/releases  -->
    <xp:this.resources>
    	<xp:headTag tagName="script">
    		<xp:this.attributes>
    			<xp:parameter name="type" value="text/javascript" />
    			<xp:parameter name="src" value="showdown.min.js" />
    		</xp:this.attributes>
    	</xp:headTag>
    	<xp:styleSheet href="/github-markdown.css"></xp:styleSheet>
    </xp:this.resources>
    <xp:this.properties>
        <xp:parameter name="xsp.resources.aggregate" value="true" />
    </xp:this.properties>
<!--    -->
<!--  This script block contains the CSJS that calls the markdown rendering  -->
    <xp:scriptBlock id="scriptBlock1" defer="false">
    	<xp:this.value><![CDATA[dojo.addOnLoad( function() {
  var text = document.getElementById("#{id:Hidden1}").innerHTML;
  target = document.getElementById('targetDiv'),
  converter = new showdown.Converter(),
  html = converter.makeHtml(text);
  target.innerHTML = html;
} );
  ]]></xp:this.value> 
    </xp:scriptBlock>
<!--This hidden field is used to transfer the text from the resource file between the SSJS and the CSJS    -->
    <xp:text escape="true" id="Hidden1" style="display:none">
    	<xp:this.value><![CDATA[#{javascript:// the file below is in the file resources
// it can have any name and any suffix
var url = "/demo.md";
var data = facesContext.getExternalContext().getResourceAsStream( url );
var txt = "";
            while( data.available() ){
                txt += @Char(data.read());
            }
return(txt)}]]></xp:this.value>
</xp:text>
<!---->
<div id="targetDiv" class="markdown-body"></div></xp:view>