{
"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": [
"<!-- 主动声明单元格为 html 单元格，可以省略后在右下方选择！ -->\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": [
"<!DOCTYPE html>\n",
"<html lang=\"zh-CN\">\n",
"<head>\n",
" <meta charset=\"UTF-8\">\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <title>完整html文档</title>\n",
"</head>\n",
"<body>\n",
" <div>\n",
" hello, html !\n",
" </div>\n",
"</body>\n",
"</html>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：html片断"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "html"
},
"polyglot_notebook": {
"kernelName": "html"
}
},
"outputs": [],
"source": [
"<!-- html片断，与完整html文档用法基本一样 -->\n",
"#!html\n",
"\n",
"<div>\n",
" 使用html片断\n",
"</div>"
]
},
{
"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",
"<div style=\"background-color: purple; padding: 50px;\">\n",
" <div style=\"width:400px; height:100px; line-height: 96px; margin: 0 auto; border: 2px solid darkorange; background-color: cadetblue; text-align: center; font-size: 25px;\">\n",
" 使用 <strong>行内</strong> 样式\n",
" </div>\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：内部样式"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 使用内部样式 -->\n",
"<style>\n",
" .outer {\n",
" background-color: purple; \n",
" padding: 50px;\n",
" }\n",
" .inner {\n",
" width:400px; \n",
" height:100px; \n",
" line-height: 96px; \n",
" margin: 0 auto; \n",
" border: 2px solid darkorange; \n",
" background-color: cadetblue; \n",
" text-align: center; \n",
" font-size: 25px;\n",
" }\n",
"</style>\n",
"<div class=\"outer\">\n",
" <div class=\"inner\">\n",
" 使用 <strong>内部</strong> 样式\n",
" </div>\n",
"</div>"
]
},
{
"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",
"<link rel=\"stylesheet\" href=\"./WebSite/css/demo.css\">\n",
"<div class=\"demo-outer\">\n",
" <div class=\"demo-inner\">\n",
" 引用 <strong>外部</strong> 样式表文件\n",
" </div>\n",
"</div>"
]
},
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"### 使用：嵌入式 javascript ［基本不用］"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"dotnet_interactive": {
"language": "csharp"
},
"polyglot_notebook": {
"kernelName": "csharp"
}
},
"outputs": [],
"source": [
"#!html\n",
"<!-- 嵌入式 javascript -->\n",
"<div \n",
" style=\"background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;\" \n",
" onclick='event.currentTarget.style.backgroundColor=\"chocolate\";'>\n",
" 点我改变背景变色\n",
"</div>"
]
},
{
"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",
"<!-- 行内 javascript -->\n",
"<div id=\"js-test\"\n",
" style=\"background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;\" \n",
" onclick='event.currentTarget.style.backgroundColor=\"chocolate\";'>\n",
" 点我切换背景颜色\n",
"</div>\n",
"<script>\n",
" var flag =false;\n",
" document.getElementById(\"js-test\").onclick = function()\n",
" {\n",
" if(flag)\n",
" {\n",
" event.currentTarget.style.backgroundColor = \"goldenrod\";\n",
" }\n",
" else\n",
" {\n",
" event.currentTarget.style.backgroundColor = \"green\";\n",
" }\n",
" flag = !flag;\n",
" };\n",
"</script>"
]
},
{
"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",
"<!-- 行内 javascript -->\n",
"<div id=\"js-file-test\"\n",
" style=\"background-color: purple; margin: 10px auto; padding: 50px; font-size: 50px; text-align: center;\" \n",
" onclick='event.currentTarget.style.backgroundColor=\"chocolate\";'>\n",
" 点我切换背景颜色\n",
"</div>\n",
"<script src=\"./WebSite/js/index.js\"></script>"
]
},
{
"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",
"<!-- 直接使用外部html文件 -->\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",
"<!DOCTYPE html>\n",
"<html lang=\"zh-CN\">\n",
"<head>\n",
" <meta charset=\"UTF-8\">\n",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <title>笔记本直接引用外部 html 文件</title>\n",
" <!-- 相对于notebook文件的路径 -->\n",
" <link rel=\"stylesheet\" href=\"./WebSite/css/index.css\">\n",
" <script>\n",
" function GetRandomColor() {\n",
" var r = Math.floor(Math.random() * 255);\n",
" var g = Math.floor(Math.random() * 255);\n",
" var b = Math.floor(Math.random() * 255);\n",
" \n",
" return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n",
" }\n",
"\n",
" function RandomColor(event) {\n",
" event.currentTarget.style.backgroundColor = GetRandomColor();\n",
" };\n",
"</script>\n",
"</head>\n",
"<body>\n",
" <div class=\"container\">\n",
" @{\n",
" for(int i=1;i<=7; i++)\n",
" {\n",
" <div class=\"@($\"item item{i}\")\"></div>\n",
" }\n",
" }\n",
" </div>\n",
"</body>\n",
"<script src=\"./WebSite/js/index.js\"></script>\n",
"</html>"
]
}
],
"metadata": {
"kernelspec": {
"display_name": ".NET (C#)",
"language": "C#",
"name": ".net-csharp"
},
"language_info": {
"name": "polyglot-notebook"
},
"orig_nbformat": 4,
"polyglot_notebook": {
"kernelInfo": {
"defaultKernelName": "csharp",
"items": [
{
"aliases": [],
"name": "csharp"
},
{
"aliases": [],
"name": "razor"
}
]
}
}
},
"nbformat": 4,
"nbformat_minor": 2
}