Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (106 sloc) 5.91 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
The Literate sample
parameters will be replaced with the
document title extracted from the <h1> element or
file name, if there is no <h1> heading
-->
<title>Literate sample
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="content/style.css" />
<script src="content/tips.js" type="text/javascript"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row" style="margin-top:30px">
<div class="span1"></div>
<div class="span10" id="main">
<h1>Literate sample</h1>
<p>This file demonstrates how to write Markdown document with
embedded F# snippets that can be transformed into nice HTML
using the <code>literate.fsx</code> script from the <a href="http://fsprojects.github.io/FSharp.Formatting">F# Formatting
package</a>.</p>
<p>In this case, the document itself is a valid Markdown and
you can use standard Markdown features to format the text:</p>
<ul>
<li>Here is an example of unordered list and...</li>
<li>Text formatting including <strong>bold</strong> and <em>emphasis</em></li>
</ul>
<p>For more information, see the <a href="http://daringfireball.net/projects/markdown">Markdown</a> reference.</p>
<h2>Writing F# code</h2>
<p>In standard Markdown, you can include code snippets by
writing a block indented by four spaces and the code
snippet will be turned into a <code>&lt;pre&gt;</code> element. If you do
the same using Literate F# tool, the code is turned into
a nicely formatted F# snippet:</p>
<table class="pre"><tr><td class="lines"><pre class="fssnip">
<span class="l">1: </span>
<span class="l">2: </span>
<span class="l">3: </span>
<span class="l">4: </span>
<span class="l">5: </span>
<span class="l">6: </span>
</pre>
</td>
<td class="snippet"><pre class="fssnip">
<span class="c">/// The Hello World of functional languages!</span>
<span class="k">let</span> <span class="k">rec</span> <span onmouseout="hideTip(event, 'fs1', 1)" onmouseover="showTip(event, 'fs1', 1)" class="f">factorial</span> <span onmouseout="hideTip(event, 'fs2', 2)" onmouseover="showTip(event, 'fs2', 2)" class="i">x</span> <span class="o">=</span>
<span class="k">if</span> <span onmouseout="hideTip(event, 'fs2', 3)" onmouseover="showTip(event, 'fs2', 3)" class="i">x</span> <span class="o">=</span> <span class="n">0</span> <span class="k">then</span> <span class="n">1</span>
<span class="k">else</span> <span onmouseout="hideTip(event, 'fs2', 4)" onmouseover="showTip(event, 'fs2', 4)" class="i">x</span> <span class="o">*</span> (<span onmouseout="hideTip(event, 'fs1', 5)" onmouseover="showTip(event, 'fs1', 5)" class="f">factorial</span> (<span onmouseout="hideTip(event, 'fs2', 6)" onmouseover="showTip(event, 'fs2', 6)" class="i">x</span> <span class="o">-</span> <span class="n">1</span>))
<span class="k">let</span> <span onmouseout="hideTip(event, 'fs3', 7)" onmouseover="showTip(event, 'fs3', 7)" class="i">f10</span> <span class="o">=</span> <span onmouseout="hideTip(event, 'fs1', 8)" onmouseover="showTip(event, 'fs1', 8)" class="f">factorial</span> <span class="n">10</span>
</pre>
</td>
</tr>
</table>
<h2>Hiding code</h2>
<p>If you want to include some code in the source code,
but omit it from the output, you can use the <code>hide</code>
command. You can also use <code>module=...</code> to specify that
the snippet should be placed in a separate module
(e.g. to avoid duplicate definitions).</p>
<p>The value will be deffined in the F# code that is
processed and so you can use it from other (visible)
code and get correct tool tips:</p>
<table class="pre"><tr><td class="lines"><pre class="fssnip">
<span class="l">1: </span>
</pre>
</td>
<td class="snippet"><pre class="fssnip">
<span class="k">let</span> <span onmouseout="hideTip(event, 'fs4', 9)" onmouseover="showTip(event, 'fs4', 9)" class="i">answer</span> <span class="o">=</span> <span onmouseout="hideTip(event, 'fs5', 10)" onmouseover="showTip(event, 'fs5', 10)" class="t">Hidden</span><span class="o">.</span><span onmouseout="hideTip(event, 'fs6', 11)" onmouseover="showTip(event, 'fs6', 11)" class="i">answer</span>
</pre>
</td>
</tr>
</table>
<h2>Including other snippets</h2>
<p>When writing literate programs as Markdown documents,
you can also include snippets in other languages.
These will not be colorized and processed as F#
code samples:</p>
<table class="pre"><tr><td><pre lang="csharp">Console.WriteLine(<span class="s">"Hello world!"</span>);
</pre></td></tr></table>
<p>This snippet is turned into a <code>pre</code> element with the
<code>lang</code> attribute set to <code>csharp</code>.</p>
<div class="tip" id="fs1">val factorial : x:int -&gt; int<br /><br />Full name: demo.factorial<br /><em><br /><br />&#160;The Hello World of functional languages!</em></div>
<div class="tip" id="fs2">val x : int</div>
<div class="tip" id="fs3">val f10 : int<br /><br />Full name: demo.f10</div>
<div class="tip" id="fs4">val answer : int<br /><br />Full name: demo.answer</div>
<div class="tip" id="fs5">module Hidden<br /><br />from demo</div>
<div class="tip" id="fs6">val answer : int<br /><br />Full name: demo.Hidden.answer<br /><em><br /><br />&#160;This is a hidden answer</em></div>
</div>
<div class="span1"></div>
</div>
</div>
</body>
</html>