Code Snippets

Code Snippets

There are several ways in which you can embed code snippets in F# documentation pages.

External code snippets

You can reference code snippets stored in your repo by using the code language specified. The content of specified code path will be expanded and included in your file.

We don’t have restrictions on the folder structure of code snippets. You should just manage the code snippets as normal source code.

Syntax:

[!code-<language>[<name>](<codepath><queryoption><queryoptionvalue> "<title>")]

• <language> can be made up of any number of character and '-'. However, the recommend value should follow Highlight.js language names and aliases.
• <codepath> is the relative path in file system which indicates the code snippet file that you want to expand.
• <queryoption> and <queryoptionvalue> are used together to retrieve part of the code snippet file in the line range or tag name way. We have 2 query string options to represent these 2 ways:
  • #: #L{startlinenumber}-L{endlinenumber} (line range) or #L{tagname} (tag name)
  • ?: ?start={startlinenumber}&end={endlinenumber} (line range) or ?{name}={tagname} (tag name)
• <title> can be omitted.

Code Snippet Sample

[!code-csharp[Main](Program.cs)]

[!code[Main](Program.cs#L12-L16 "This is source file")]
[!code-vb[Main](../Application/Program.vb#testsnippet "This is source file")]

[!code[Main](index.xml?start=5&end=9)]
[!code-javascript[Main](../jquery.js?name=testsnippet)]

Tag Name Representation in Code Snippet Source File

DFM currently only supports following <language> values to be able to retrieve by tag name:

• C#: cs, csharp
• VB: vb, vbnet
• C++: cpp, c++
• F#: fsharp
• XML: xml
• Html: html
• SQL: sql
• Javascript: javascript

Tabbed code snippets

This works for both inline and external code snippets. You can have multiple samples grouped together so the user can see them in different tabs.

To get this:

You will need to use code structured like this:

> [!div class="tabbedCodeSnippets"]
    ```cs
var outlookClient = await CreateOutlookClientAsync("Calendar");
var events = await outlookClient.Me.Events
  .Take(10)
  .ExecuteAsync();
foreach(var calendarEvent in events.CurrentPage)
{
  System.Diagnostics.Debug.WriteLine("Event '{0}'.", calendarEvent.Subject);
}
    ```
    ```javascript
outlookClient.me.events.getEvents().fetch().then(function (result) {
    result.currentPage.forEach(function (event) {
console.log('Event "' + event.subject + '"')
    });
}, function(error) {
    console.log(error);
});
    ```