Permalink
Find file Copy path
d42458c Apr 10, 2017
2 contributors

Users who have contributed to this file

@tpetricek @edhzsz
177 lines (151 sloc) 8.01 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 literate F# script
files (<code>*.fsx</code>) 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>As you can see, a comment starting with double asterisk
is treated as part of the document and is transformed
using Markdown, which means that you can use:</p>
<ul>
<li>Unordered or ordered lists</li>
<li>Text formatting including <strong>bold</strong> and <em>emphasis</em></li>
</ul>
<p>And numerous other <a href="http://daringfireball.net/projects/markdown">Markdown</a> features.</p>
<h2>Writing F# code</h2>
<p>Code that is not inside comment will be formatted as
a sample snippet (which also means that you can
run it in Visual Studio or MonoDevelop).</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.</p>
<p>The value will be deffined in the F# code 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, 'fs5', 10)" onmouseover="showTip(event, 'fs5', 10)" class="i">answer</span> <span class="o">=</span> <span onmouseout="hideTip(event, 'fs4', 11)" onmouseover="showTip(event, 'fs4', 11)" class="i">hidden</span>
</pre>
</td>
</tr>
</table>
<h2>Moving code around</h2>
<p>Sometimes, it is useful to first explain some code that
has to be located at the end of the snippet (perhaps
because it uses some definitions discussed in the middle).
This can be done using <code>include</code> and <code>define</code> commands.</p>
<p>The following snippet gets correct tool tips, even though
it uses <code>laterFunction</code>:</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>
</pre>
</td>
<td class="snippet"><pre class="fssnip">
<span class="k">let</span> <span onmouseout="hideTip(event, 'fs7', 13)" onmouseover="showTip(event, 'fs7', 13)" class="i">sample</span> <span class="o">=</span>
<span onmouseout="hideTip(event, 'fs6', 14)" onmouseover="showTip(event, 'fs6', 14)" class="f">laterFunction</span>()
<span class="o">|&gt;</span> <span onmouseout="hideTip(event, 'fs8', 15)" onmouseover="showTip(event, 'fs8', 15)" class="f">printfn</span> <span class="s">&quot;Got: </span><span class="pf">%s</span><span class="s">&quot;</span>
</pre>
</td>
</tr>
</table>
<p>Then we can explain how <code>laterFunction</code> is defined:</p>
<table class="pre"><tr><td class="lines"><pre class="fssnip">
<span class="l">1: </span>
<span class="l">2: </span>
</pre>
</td>
<td class="snippet"><pre class="fssnip">
<span class="k">let</span> <span onmouseout="hideTip(event, 'fs6', 12)" onmouseover="showTip(event, 'fs6', 12)" class="f">laterFunction</span>() <span class="o">=</span>
<span class="s">&quot;Not very difficult, is it?&quot;</span>
</pre>
</td>
</tr>
</table>
<p>This example covers pretty much all features that are
currently implemented in <code>literate.fsx</code>, but feel free
to <a href="https://github.com/fsprojects/FSharp.Formatting">fork the project on GitHub</a> and add more
features or report bugs!</p>
<h2>Other features</h2>
<p>The tool-tips also work for double-backtick identifiers.
This might be useful to generate nice documents from tests:</p>
<table class="pre"><tr><td class="lines"><pre class="fssnip">
<span class="l">1: </span>
<span class="l">2: </span>
</pre>
</td>
<td class="snippet"><pre class="fssnip">
<span class="k">let</span> <span onmouseout="hideTip(event, 'fs9', 16)" onmouseover="showTip(event, 'fs9', 16)" class="f">``1 + 1 should be equal to 2``</span>() <span class="o">=</span>
<span class="n">1</span> <span class="o">+</span> <span class="n">1</span> <span class="o">=</span> <span class="n">2</span>
</pre>
</td>
</tr>
</table>
<p>Others examples follow here.</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 hidden : int<br /><br />Full name: Demo.hidden<br /><em><br /><br />&#160;This is a hidden answer</em></div>
<div class="tip" id="fs5">val answer : int<br /><br />Full name: Demo.answer</div>
<div class="tip" id="fs6">val laterFunction : unit -&gt; string<br /><br />Full name: Demo.laterFunction</div>
<div class="tip" id="fs7">val sample : unit<br /><br />Full name: Demo.sample</div>
<div class="tip" id="fs8">val printfn : format:Printf.TextWriterFormat&lt;&#39;T&gt; -&gt; &#39;T<br /><br />Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.printfn</div>
<div class="tip" id="fs9">val ( 1 + 1 should be equal to 2 ) : unit -&gt; bool<br /><br />Full name: Demo.( 1 + 1 should be equal to 2 )</div>
</div>
<div class="span1"></div>
</div>
</div>
</body>
</html>