{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Outputting HTML in a notebook" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Display Helpers\n", "\n", "There are a number of helper methods for writing HTML that are available by default in a .NET notebook." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "using static Microsoft.DotNet.Interactive.Formatting.PocketViewTags;\n", "using Microsoft.DotNet.Interactive.Formatting;" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### HTML" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If you want to write out a `string` as HTML, you can use the `HTML` method:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "display(HTML(\"Hello!\"));" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Displaying HTML using a `string` directly will display the actual string rather than rendering it as HTML. " ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "display(\"Hello!\");" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `HTML` method signals that the content is HTML because its return type, `HtmlString`, implements `IHtmlContent`:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "var someHtml = HTML(\"Hello!\");\n", "\n", "display(someHtml.GetType());" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Javascript" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You may also want to output JavaScript. You can do this using the `Javascript` helper." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "Javascript(@\"alert(\"\"Hello!\"\");\");" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## PocketView (C#)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "For more complex HTML, you can use the PocketView API. Lets start with an example:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "display(\n", " span(\n", " img[src:\"https://en.wikipedia.org/favicon.ico\", style:\"height:1.5em\"],\n", " a[href: @\"https://en.wikipedia.org\", target: \"blank\", style:\"color:green\"](b(\"Wikipedia\"))\n", " )\n", ");" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "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:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "var pocketView = span(\n", " img[src:\"https://en.wikipedia.org/favicon.ico\", style:\"height:1.5em\"],\n", " a[href: @\"https://en.wikipedia.org\", target: \"blank\", style:\"color:green\"](b(\"Wikipedia\")));\n", "\n", "display(pocketView.ToString());" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "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:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "var pocketViewTagMethods = typeof(PocketViewTags)\n", " .GetProperties()\n", " .Select(m => m.Name);\n", "\n", "display(pocketViewTagMethods);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "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." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "var pocketView = i(\"Hello!\");\n", "\n", "display(pocketView);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "A `PocketView` instance can also be decorated with attributes using square brackets." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "var pocketView = span[style:\"font-style:italic\"](\"Hello!\");\n", "\n", "display(pocketView);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You'll notice that if you pass a `string` to `PocketView`, it will be HTML encoded for you:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" } }, "outputs": [], "source": [ "PocketView pocketView = span(\"