{
"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"在多语言笔记本中使用 html\n",
"======================="
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 方式一：纯(传统)html方式"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### hello html"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"\n",
"#!html\n",
"\n",
"hellow html !\n"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：完整html文档"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"\n",
"\n",
"\n",
" \n",
" \n",
" \n",
" 完整html文档\n",
"\n",
"\n",
" \n",
" hello, html !\n",
"
\n",
"\n",
""
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：html片断"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"\n",
"#!html\n",
"\n",
"\n",
" 使用html片断\n",
"
"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：行内(内联)样式"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"\n",
"\n",
"
\n",
" 使用 行内 样式\n",
"
\n",
"
\n",
"
\n",
" 使用 内部 样式\n",
"
\n",
"
\n",
"
\n",
" 引用 外部 样式表文件\n",
"
\n",
"
\n",
" 点我改变背景变色\n",
"
"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用行内 javascript"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"\n",
"\n",
" 点我切换背景颜色\n",
"
\n",
""
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 引用：外部 javascript 文件"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"\n",
"\n",
" 点我切换背景颜色\n",
"
\n",
""
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 引用：外部html文件"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"有问题：html中引用的外部css文件、js文件路径要相对于笔记本文件而不是html本身的路径。这点特别恶心，目前没找到完美的解决方法。可以入两次暂时解决演示用或者笔记与html文件同目录！"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"#!html\n",
"\n",
"#!import ./WebSite/index.html"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"## 方式二：结合 asp.net 的 Razor方式 "
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"注意：此方法动态生成html，可以操作数据库、请求第三方接口等，也可以使用共享变量，非常方便。"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"// 添加包源(省略即使用默认nuget包源)\n",
"#i \"nuget:https://api.nuget.org/v3/index.json\"\n",
"\n",
"// 引用Razor包\n",
"#r \"nuget: RazorInteractive\"\n",
"\n",
"//使用 Razor 生成 html或html片断"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!razor\n",
"\n",
"\n",
"\n",
"\n",
" \n",
" \n",
" \n",
" 笔记本直接引用外部 html 文件\n",
" \n",
" \n",
" \n",
"\n",
"\n",
" \n",
" @{\n",
" for(int i=1;i<=7; i++)\n",
" {\n",
"
\n",
" }\n",
" }\n",
"