markheath/index.html

## index.html
<!DOCTYPE html>
<html lang=en-us>
<head>
    <meta charset=utf-8><title>Highlight JS</title>
    <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"></script>
</head>

    <body>
    <div class=container>

        <h3>Some XML / HTML</h3>
        <p>Put this in your head:</p>
        <pre class="brush: xml;">    &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"&gt;&lt;/script&gt;</pre>


        <h3>Some JavaScript</h3>
        <p>Put this in a script block at the end of your body:</p>
        <pre class="brush: javascript;">document.addEventListener("DOMContentLoaded", function (event) {
        var languages = hljs.listLanguages();
        var codeBlocks = document.getElementsByTagName("pre");

        for (var i = 0; i &lt; codeBlocks.length; i++) {
            var block = codeBlocks[i];

            var regex = /brush\:\s([a-zA-z]+)\;/g;
            match = regex.exec(block.className);
            var brushName = "nohighlight";
            if (match != null) {
                var oldBrushName = match[1];
                if (oldBrushName == "csharp") oldBrushName = "cs";
                if (languages.indexOf(oldBrushName) === -1) {
                    console.log("unsupported brush " + oldBrushName);
                }
                else {
                    brushName = oldBrushName;
                }
            }

            block.className = "hljs " + brushName;
            hljs.highlightBlock(block);
        }
    });

</pre>


        <h3>Some C#</h3>
        <p>C# Supported out of the box</p>
        <pre class="brush: csharp;">private static string CallMailChimpApi(string method, string requestJson)
{
    var endpoint = String.Format("https://{0}.api.mailchimp.com/2.0/{1}", "us3", method);
    var wc = new WebClient();
    try
    {
        return wc.UploadString(endpoint, requestJson);
    }
    catch (WebException we)
    {
        using (var sr = new StreamReader(we.Response.GetResponseStream()))
        {
            return sr.ReadToEnd();
        }
    }
}</pre>

        <h3>Some F#</h3>
        <p>F# had to be added with an additional language pluin (hosted on cloudflare)</p>

        <pre class="brush: fsharp;">
let firstHundred = [0..100]
List.map (fun x -&gt; x * 2)
    (List.filter (fun x -&gt; x % 2 = 0) firstHundred)</pre>


        <h3>Some plain text</h3>
        <p>For plain text, the nohighlight class can be used</p>
        <pre class="brush: plain;">This is the first line
This is the second line</pre>

<script >
    document.addEventListener("DOMContentLoaded", function (event) {
        var languages = hljs.listLanguages();
        console.log(languages);
        var codeBlocks = document.getElementsByTagName("pre");

        for (var i = 0; i < codeBlocks.length; i++) {
            var block = codeBlocks[i];

            var regex = /brush\:\s([a-zA-z]+)/g; // removed requirement for a semi-colon at end - this is not always present
            match = regex.exec(block.className);
            var brushName = "nohighlight";
            if (match != null) {
                var oldBrushName = match[1];
                if (oldBrushName == "csharp") oldBrushName = "cs";
                if (oldBrushName == "js") oldBrushName = "javascript";
                if (languages.indexOf(oldBrushName) === -1) {
                    console.log("unsupported brush " + oldBrushName);
                }
                else {
                    brushName = oldBrushName;
                }
                block.className = "hljs " + brushName;
                hljs.highlightBlock(block);

            }
            // don't highlight if no "brush: " found, might be a github gist or another style of code block

        }
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang=en-us>
	<head>
	<meta charset=utf-8><title>Highlight JS</title>
	<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1">
	<link rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css>

	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"></script>
	</head>

	<body>
	<div class=container>

	<h3>Some XML / HTML</h3>
	<p>Put this in your head:</p>
	<pre class="brush: xml;"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"></script></pre>


	<h3>Some JavaScript</h3>
	<p>Put this in a script block at the end of your body:</p>
	<pre class="brush: javascript;">document.addEventListener("DOMContentLoaded", function (event) {
	var languages = hljs.listLanguages();
	var codeBlocks = document.getElementsByTagName("pre");

	for (var i = 0; i < codeBlocks.length; i++) {
	var block = codeBlocks[i];

	var regex = /brush\:\s([a-zA-z]+)\;/g;
	match = regex.exec(block.className);
	var brushName = "nohighlight";
	if (match != null) {
	var oldBrushName = match[1];
	if (oldBrushName == "csharp") oldBrushName = "cs";
	if (languages.indexOf(oldBrushName) === -1) {
	console.log("unsupported brush " + oldBrushName);
	}
	else {
	brushName = oldBrushName;
	}
	}

	block.className = "hljs " + brushName;
	hljs.highlightBlock(block);
	}
	});

	</pre>


	<h3>Some C#</h3>
	<p>C# Supported out of the box</p>
	<pre class="brush: csharp;">private static string CallMailChimpApi(string method, string requestJson)
	{
	var endpoint = String.Format("https://{0}.api.mailchimp.com/2.0/{1}", "us3", method);
	var wc = new WebClient();
	try
	{
	return wc.UploadString(endpoint, requestJson);
	}
	catch (WebException we)
	{
	using (var sr = new StreamReader(we.Response.GetResponseStream()))
	{
	return sr.ReadToEnd();
	}
	}
	}</pre>

	<h3>Some F#</h3>
	<p>F# had to be added with an additional language pluin (hosted on cloudflare)</p>

	<pre class="brush: fsharp;">
	let firstHundred = [0..100]
	List.map (fun x -> x * 2)
	(List.filter (fun x -> x % 2 = 0) firstHundred)</pre>


	<h3>Some plain text</h3>
	<p>For plain text, the nohighlight class can be used</p>
	<pre class="brush: plain;">This is the first line
	This is the second line</pre>

	<script >
	document.addEventListener("DOMContentLoaded", function (event) {
	var languages = hljs.listLanguages();
	console.log(languages);
	var codeBlocks = document.getElementsByTagName("pre");

	for (var i = 0; i < codeBlocks.length; i++) {
	var block = codeBlocks[i];

	var regex = /brush\:\s([a-zA-z]+)/g; // removed requirement for a semi-colon at end - this is not always present
	match = regex.exec(block.className);
	var brushName = "nohighlight";
	if (match != null) {
	var oldBrushName = match[1];
	if (oldBrushName == "csharp") oldBrushName = "cs";
	if (oldBrushName == "js") oldBrushName = "javascript";
	if (languages.indexOf(oldBrushName) === -1) {
	console.log("unsupported brush " + oldBrushName);
	}
	else {
	brushName = oldBrushName;
	}
	block.className = "hljs " + brushName;
	hljs.highlightBlock(block);

	}
	// don't highlight if no "brush: " found, might be a github gist or another style of code block

	}
	});
	</script>
	</body>
	</html>