There are a number of helper methods for writing HTML that are available by default in a .NET notebook.
using static Microsoft.DotNet.Interactive.Formatting.PocketViewTags;
using Microsoft.DotNet.Interactive.Formatting;
If you want to write out a string as HTML, you can use the HTML method:
display(HTML("<b style=\"color:blue\">Hello!</b>"));
Displaying HTML using a string directly will display the actual string rather than rendering it as HTML.
display("<b style=\"color:blue\">Hello!</b>");
The HTML method signals that the content is HTML because its return type, HtmlString, implements IHtmlContent:
var someHtml = HTML("<b style=\"color:blue\">Hello!</b>");
display(someHtml.GetType());
You may also want to output JavaScript. You can do this using the Javascript helper.
Javascript(@"alert(""Hello!"");");
For more complex HTML, you can use the PocketView API. Lets start with an example:
display(
span(
img[src:"https://en.wikipedia.org/favicon.ico", style:"height:1.5em"],
a[href: @"https://en.wikipedia.org", target: "blank", style:"color:green"](b("Wikipedia"))
)
);
PocketView is an API for concisely writing HTML, in the terminology of HTML, using C# code. Just like the HTML method, it returns an object that implements IHtmlContent. You can see the actual HTML code by converting a PocketView to a string:
var pocketView = span(
img[src:"https://en.wikipedia.org/favicon.ico", style:"height:1.5em"],
a[href: @"https://en.wikipedia.org", target: "blank", style:"color:green"](b("Wikipedia")));
display(pocketView.ToString());
The PocketView API provides a number of top-level properties in your notebook that can be used to create various HTML tags. Here's the list of tags that are supported by default:
var pocketViewTagMethods = typeof(PocketViewTags)
.GetProperties()
.Select(m => m.Name);
display(pocketViewTagMethods);
Each of these properties returns a PocketView instance that can then be filled in with some content by passing arguments to it like a method call.
var pocketView = i("Hello!");
display(pocketView);
A PocketView instance can also be decorated with attributes using square brackets.
var pocketView = span[style:"font-style:italic"]("Hello!");
display(pocketView);
You'll notice that if you pass a string to PocketView, it will be HTML encoded for you:
PocketView pocketView = span("<div>This string looks like HTML but it will be HTML encoded.</div>");
display(pocketView);
display("Have a look at the actual HTML:");
display(pocketView.ToString());
If you don't want the content to be encoded, simply pass it wrapped in a type that implements IHtmlContent.
var htmlContent = HTML("<i>This won't be HTML encoded.</i>");
PocketView pocketView = span(
htmlContent
);
display(pocketView);
You can pass other types of objects of into a PocketView as well. When you do this, they're formatted using the plain text formatter, which by default expands the object's properties.
PocketView pocketView = b(
new { Fruit = "apple", Texture = "smooth" }
);
display(pocketView);
There are also several magic commands that can be used to output HTML in your .NET notebook.
You can output HTML...
#!html
<b>Hello!</b>
...or run JavaScript...
#!javascript
alert("hello");
...or render Markdown.
#!markdown
Write a **list** ...
* first
* second
...or a _table_...
|Fruit |Texture |
|---------|--------|
|apple |smooth |
|durian |bumpy |